Vue 2 + VueRouter 2 + Laravel 5.3 - Webpack (Runtime x Standalone build issue)

2
votes

I am facing an error trying to use Vuejs 2 + Vue Router 2 + Laravel 5.3 with webpack!

There is my code:

My index.html

<div id="app">
        <router-view></router-view>
    </div>

My app.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Map from './map'

Vue.use(VueRouter);

const router = new VueRouter({
    routes: Map
});

new Vue({
    router,
    render: h => {
        return h(App)
    }
}).$mount('#app');

My App.vue

<template>
    <router-view></router-view>
</template>

<script>
    export default {
        name: 'App',
    }
</script>

With this a have the following error:

You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

If I change my Vue import from: import Vue from 'vue' to import Vue from 'vue/dist/vue.js' it works fine!

Somebody know how to fix it?

3
webpacklaravel-5.3vuejs2

3 Answers

3
votes

Guys I think it was related to the laravel-elixie-vue package!

I work with Anderson and we have installed a fresh laravel version which came with the new package laravel-elixir-vue-2 and solve the problem!

Both Vedovelli and Vinicius's comments works properly when we updated the package!

Thanks

2
votes

try

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Map from './map'

Vue.use(VueRouter);

const router = new VueRouter({
  routes: Map
});

new App({
  router
}).$mount('#app');

And remove the from your index.html

1
votes

Just remove the <router-view></router-view> from your index.html and you should be fine.