Issues with Laravel and Vue -

i using vue , laravel spa. having issue first time click link on app see flash, , after page transitions smooth.

i included 15-second video demonstrating issue here: https://drive.google.com/file/d/0bxrp6oa1_a_ecndhwwxbthgzeeu/view?usp=sharing

the plugins using vue-router , vuetify.

here entry file app.js

import vue 'vue'; import vuetify 'vuetify'; import vuerouter 'vue-router';  import app './views/app.vue';  vue.use(vuetify); vue.use(vuerouter);  window.vue = vue;  const foo = { template: '<div>foo</div>' }; const bar = { template: '<div>bar</div>' }; const bit = { template: '<div>bit</div>' }; const bat = { template: '<div>bat</div>' };  const routes = [     { path: '/foo', component: foo },     { path: '/bar', component: bar },     { path: '/bit', component: bit },     { path: '/bat', component: bat } ];  const router = new vuerouter({     routes // short `routes: routes` });  const app = new vue({     el: '#app',     render: h => h(app),     router }); 

here main template file app.vue

<template>     <v-app id="example-2" standalone>         <v-navigation-drawer persistent dark :mini-variant.sync="mini" v-model="drawer" overflow>             <v-toolbar flat class="transparent">                 <v-list class="pa-0">                     <v-list-tile avatar tag="div">                         <v-list-tile-avatar>                             <img src="https://randomuser.me/api/portraits/men/85.jpg" />                         </v-list-tile-avatar>                         <v-list-tile-content>                             <v-list-tile-title>john leider</v-list-tile-title>                         </v-list-tile-content>                         <v-list-tile-action>                             <v-btn icon @click.native.stop="mini = !mini">                                 <v-icon>chevron_left</v-icon>                             </v-btn>                         </v-list-tile-action>                     </v-list-tile>                 </v-list>             </v-toolbar>             <v-list class="pt-0" dense>                 <v-divider></v-divider>                 <v-list-tile v-for="item in items" :key="item.title" route :to="item.path">                     <v-list-tile-action>                         <v-icon>{{ item.icon }}</v-icon>                     </v-list-tile-action>                     <v-list-tile-content>                         <v-list-tile-title>{{ item.title }}</v-list-tile-title>                     </v-list-tile-content>                 </v-list-tile>             </v-list>         </v-navigation-drawer>         <v-toolbar fixed class="indigo darken-4" dark>             <v-toolbar-side-icon @click.native.stop="drawer = !drawer"></v-toolbar-side-icon>             <v-toolbar-title>toolbar</v-toolbar-title>         </v-toolbar>         <main>             <v-container fluid>                 <router-view></router-view>             </v-container>         </main>     </v-app> </template>  <script>     export default {         data () {             return {                 drawer: true,                 items: [                     { title: 'foo', icon: 'dashboard', path: '/foo' },                     { title: 'bar', icon: 'question_answer', path: '/bar' },                     { title: 'bit', icon: 'home', path: '/bit' },                     { title: 'bat', icon: 'settings', path: '/bat' }                 ],                 mini: false,                 right: null             }         }     } </script> 

i shared full code here: https://github.com/andrewex/laravel-vue-test