Components are not loading with VueRouter

Question

I have been trying to setup a simple vue application using VueRouter with Laravel. But the vue-router is not loading the components properly.

welcome.blade.php

<body>
  <div id="app">
     <main-app/>
  </div>
<script src="{{ asset('js/app.js') }}"></script>
</body>

app.js

//import Vue from 'vue';
window.Vue = require('vue');
import VueRouter from 'vue-router';
import {
    routes
} from './routes';
import MainApp from './components/MainApp.vue';

Vue.use(VueRouter);
const router = new VueRouter({
    routes,
    mode: 'history'
});

const app = new Vue({
    el: '#app',
    router,
    components: {
        MainApp
    }
});

routes.js

import Home from './components/Home.vue'
export const routes = [{
    path: '/',
    component: Home,
    name: 'Home'
}];

MainApp.vue

<template>
  <div id="main">
    <router-view></router-view>
  </div>
</template>

If http://localhost:8080/vue-spa is dialed, "Home component" should be displayed (which we are displaying in Home.vue). But , nothing is displaying.

Screenshot of Dev Tools

I am new to Vue , help to find a solution for this.

instead of doing window.Vue = require('vue'), please do window.Vue = Vue; Let me know if that changes anything — Matthias S
Maybe you should put the window.Vue = require('vue') on top and remove the import Vue from ' vue' part. I am not sure if it changes things but I don't like importing vue twice in the same file through different methods. Can you go to MainApp.vue and add this to the createdhook: console.log(this.$router, this.$route) — Matthias S
Its not printing to console. Its not loading Home component. But I am not getting why its not loading — Sujay Prabhu
But if its not printing anything, it means it is not even loading MainApp.vue. So it is maybe not even a router problem. — Matthias S

Vedant Jain Vedant Jain · Accepted Answer · 2019-12-17T17:56:16

Your routes.js should be -

import Home from './components/Home.vue'
export const routes = [{
    path: '/vue-spa',
    component: Home,
    name: 'Home'
}];

Also, make sure the following is done -

You have executed the npm install command in your project. This will install the laravel-mix package, necessary for compiling your js files. (Learn more)
Then once you have your laravel-mix installed, configure the webpack.mix.js file present in your root folder. In your case (assuming the app.js file where you have written your js code is present in resources/js) the webpack.mix.js should look like -
```
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js');
```

This will yield the compiled resourses/js/app.js file in public/js/app.js

Once that is done execute npm run watch. This will recompile the public/js/app.js file every time you make any changes in your resources/js/app.js code or its imported files.

Another very important step would be to set up Laravel's routes so that any request the server receives gives an entry point to your vue.js SPA. This is the probable reason that you are getting a 404 page. Define the following route in your web.php to enable that -

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::view('/{any}', 'welcome')->where('any', '.*');

Components are not loading with VueRouter

1 Answers