Laravel 5.3 - Vue 2 flickering on page reload

Question

Every time I reload my page, in stead of displaying my Vue content, it shows and then quickly dissaperes (flickers).

My app.js file:

require('./bootstrap');

var Vue = require('vue');

new Vue({
el: '#root',
data: {
   message: 'Hello world!'
}
});

My view:

<div id="root">
    <input type="text" v-model="message">
    <p>The value of the input is: @{{ message }}</p>
</div>

Vue console error:

[Vue warn]: Failed to mount component: template or render function not defined. (found in root instance)

What could be the problem here?

Answer 1

It looks like you are using the runtime-only build so you need to provide a render function or pull in the standalone build. I'm guessing you are just getting everything up and running, so you will need to decide how you are going to design your app.

If you want to use blade templating then you will need the standalone build, so you just need to add an alias to your webpack config to pull it in (see: https://github.com/JeffreyWay/laravel-elixir-webpack-official):

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.common.js'
  }
}

Or if you are using browserify you need to add the following to package.json:

"browser": {
  "vue": "vue/dist/vue.common"
}

Laravel 5.4 now does this out of the box (with Laravel mix), but it looks like your 5.3 version does not.

If you want to use .vue files and build and SPA then you can use the runtime-only build and create an App.vue file with your layout and mount that instead:

var Vue = require('vue');
var App  = require('./components/App.vue');

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

You can check out this answer for more infomation if you want to go down this route: Updating elements outside of a component