[Vuejs]-Components are not loading with VueRouter

by

0👍

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', '.*');

Leave a comment