Components do not render through <router-view /> in Laravel 5.8 with Vuejs

Question

I'm trying to create an SPA using Vuejs and Laravel. I've installed vue-router to accomplish that. The component that has to be rendered inside the

<router-view />

tag is not rendering.

I've tried creating a new project and installing npm and vue-router again. It still does not work.

Laravel Version : 5.8.18 vue-router : 3.0.6

welcome.blade.php

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
    </head>
    <body>
        <div id = "app">
            <router-view></router-view>
        </div>

        <script src = "js/app.js"></script>
    </body>
</html>

app.js(./resources/js/app.js)

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

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

routes.js(./resources/js/routes.js)

import Home from './components/Home'

export default {
    mode: 'history',
    routes: [
    {
        path: '/',
        component: Home
    }
   ]
 }

Home.vue(./resources.components/Home.vue)

<template>
    <p>Home</p>
</template>

<script>
    export default {}
</script>

web.php

<?php

Route::get('/{any?}', function () {
    return view('welcome');
});

Can you confirm that welcome.php.blade is loading with all the other resources? — Vaibhav Singh
Yes. All of the other resources load correctly. In fact, even if I add a component directly to the page like <Navbar />, it works just fine. The problem is with the vue router — Raghunathan

hurlen hurlen · Accepted Answer · 2019-05-28T12:13:49

0

votes

Your code works for me. Remember to use

npm run watch