Woutje99
1491
16
Vue

Vue.js 2 and laravel 5.3 blank page

Posted 2 years ago by Woutje99

Hi people,

I changed in laravel 5.3, Vue JS to 2.0.1 and also changed vue-router to 2.0. When I go to an url, I see the page but after loading it is a blank page.. So I see nothing.. In vue 1.0.x there was no problem with rendering. Does someone has the same problem or know a solution?

This are my files: App.js


/**
 * First we will load all of this project's JavaScript dependencies which
 * include Vue and Vue Resource. This gives a great starting point for
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');
var VueRouter = require('vue-router');
Vue.use(VueRouter);
Vue.component('example', require('./components/Example.vue'));

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes // short for routes: routes
})

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

View - vue.blade.php

<!DOCTYPE html>
<html lang="en">
    <body>
      <div id="app">
        <h1>Hello App!</h1>
        <p>
          <!-- use router-link component for navigation. -->
          <!-- specify the link by passing the `to` prop. -->
          <!-- <router-link> will be rendered as an `<a>` tag by default -->
          <router-link to="/foo">Go to Foo</router-link>
          <router-link to="/bar">Go to Bar</router-link>
        </p>
        <!-- route outlet -->
        <!-- component matched by the route will render here -->
        <router-view></router-view>
      </div>
    </body>
    <script src="/js/app.js"></script>
</html>

Routes - web.php

Route::get('/{vue_capture?}', function () {
  return view('vue');
})->where('vue_capture', '[\/\w\.-]*');

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.