3 years ago

Vue.js 2 and laravel 5.3 blank page

Posted 3 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.

var VueRouter = require('vue-router');
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({
  render: h => h(app)

View - vue.blade.php

<!DOCTYPE html>
<html lang="en">
      <div id="app">
        <h1>Hello App!</h1>
          <!-- 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>
        <!-- route outlet -->
        <!-- component matched by the route will render here -->
    <script src="/js/app.js"></script>

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.