Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
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\.-]*');
I think this is your problem as app isn't defined at that point.
const app = new Vue({
router,
render: h => h(app)
}).$mount('#app')
You probably want to create an 'App' component
import App from './App.vue';
//...
const app = new Vue({
router,
render: h => h(App)
})
EDIT: nevermind misunderstood!
Fixed it!
Install this npm package: npm install laravel-elixir-vue-2 and uninstall laravel-elixir-vue
In your gulpfile.js do: require('laravel-elixir-vue-2')
The laravel-elixir-vue-2 helped me to! Thanks :)
Thank you @Woutje99 you saved my day.
Hi, did it work under seperate .vue files as route components? I have a problem right there: https://laracasts.com/discuss/channels/vue/using-vue-router-with-vue-component-files
I have trouble getting vue 2 to work with laravel. I even setup a clean setup with laravel and still gives me
[Vue warn]: Cannot find element: #app
I thought I was doing something wrong but if I can not get it to work out of the box, my guess is that the default setup is broken!
any ideas?
@unitedworx Did you install the newest laravel 5.3.*? In that version vue-js 2 is default.
yes thats what I did! a clean laravel 5.3 setup using composer create-project --prefer-dist laravel/laravel blog and vue 2 wont work as its supposed to out of the box!
Strange, worked fine here. Paste your code, maybe I or someone else can help you.
10 years web development and I feel like a rookie!
Spend the whole day, full 8 hours trying to trouble shoot this!
Once I left the office it hit me that problem was that script tag needed to be place and the end of the page! I guess thats what happens if you have lived inside jQuery document ready functions all you life!
Okay I have followed everything exactly as you have it here. I updated gulpfile.js to require('laravel-elixir-vue-2');
I can see the app html when I visit any URL however the "Go to Foo Go to Bar" links are just plain text they are not appearing as links, if I visit /foo or /bar it just shows the same view.
I have no errors in the console and vue devtools is showing the RouterLink components.
Note: I am using browserify, is this correct and what I should be using for app.js when running gulp?
Cannot think why it is not working as it should?
Having been struggling with this issue myself. I finally got things working.
Following all the steps you followed will get you set up, expect for one vital step. Vue.js 2 attatched to #app (in bootstrap.js).
This means that your component must be wrapped with an appropriate div element that Vue.js can bind to:
<div id="app">
<api-development></api-development>
</div>
Hope this helps.
PS: Feels good to actually be answering a question for once :D
I am having a problem with this issue. Laravel 5.3 already have require('laravel-elixir-vue-2'); in gulp.js but still it will display a blank page.
I found the solution, I changed the code from:
const app = new Vue({
router,
render: h => h(app)
}).$mount('#app');
to
const app = new Vue({
router,
}).$mount('#app');
I think it's also worth mentioning that the above code snippets are for ES6. If you want a similar functionality but for ES5 make sure you replace your arrow functions with ES5 Functions (I.E. 11 bonks at the arrow functions).
// ES6
render: h => h('router-view')
// ES5
render: function (h) {
return h('router-view')
},
just go to your project directory example: cd laravelvue then write this command npm install laravel-elixir-vue-2 i hope it will solve your problem
Please or to participate in this conversation.