[Vuejs]-Laravel 5.3 – Vue 2 flickering on page reload

by

0👍

✅

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

Leave a comment