Vue js + Laravel 6, router-view not rendering component

Question

I'm using vue js for front-end, everything was working properly until I started using the router, everytime I use the router-view the component where the router-view tag is disappears, I tried to use the router in my component called "Slider" which is called from "App", here's the error I get in the console:

app.js:73366 [Vue warn]: Error in render: "TypeError: Cannot read property 'matched' of undefined"

found in

---> <Slider> at resources/js/components/main/Slider.vue
       <App> at resources/js/views/App.vue
         <Root>
warn @ app.js:73366
app.js:74629 TypeError: Cannot read property 'matched' of undefined
    at render (app.js:69929)
    at createFunctionalComponent (app.js:75797)
    at createComponent (app.js:75970)
    at _createElement (app.js:76154)
    at createElement (app.js:76092)
    at vm._c (app.js:76223)
    at Proxy.render (app.js:69484)
    at VueComponent.Vue._render (app.js:76277)
    at VueComponent.updateComponent (app.js:76793)
    at Watcher.get (app.js:77204)

Here's the app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>page</title>

        <link href="{{ asset('css/app.css') }}" rel="stylesheet">

        <script src="{{ asset('js/app.js') }}" defer></script>


    </head>
    <body>
        <div id="app">
            <app></app>
        </div>

    </body>


</html>

App.vue

<template>
<div class="landing-page">
    <disclaimer></disclaimer>
    <navigation></navigation>
    <slider></slider>
    <landing></landing>
    <footeralt></footeralt>
</div>
</template>

Slider.vue

<template>
<div class="container">
    <b-col cols="4" md="4" sm="3" class="float-right">
        <h4 align="left">Quick links</h4>
            <b-list-group style="background-color:transparent" class="text-light">
                <b-list-group-item align="left" :to="{name: 'example'}"><strong>></strong> FAQ</b-list-group-item>
                <b-list-group-item align="left"><strong>></strong> Services</b-list-group-item>
                        </b-list-group>
                        <router-view></router-view>
                    </b-col>
                </div>
            </div>
</template>

app.js

require('./bootstrap');

import Vue from 'vue'
import VueRouter from 'vue-router'
import BootstrapVue from 'bootstrap-vue'
import routes from './routes';


Vue.use(BootstrapVue);


import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.config.productionTip = false

window.Vue = require('vue');


/* Main page coponents */
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('navigation', require('./components/main/Navigation.vue').default);
Vue.component('disclaimer', require('./components/main/Disclaimer.vue').default);
Vue.component('slider', require('./components/main/Slider.vue').default);
Vue.component('landing', require('./components/main/Landing.vue').default);
Vue.component('footeralt', require('./components/main/Footer.vue').default);
Vue.component('app', require('./views/App.vue').default);

/* Router */
Vue.use(VueRouter);

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

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

routes.js

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

web.php (Laravel routes)

Route::get('/{any}', 'mainpage\LandingController@index')->where('any', '.*');

LandingController

class LandingController extends Controller
{
    public function index(){
        return view ('app');
    }
}

s4k1b · Accepted Answer · 2019-10-28 15:29:45Z

3

In your app.js file.

// import the App.vue file
import App from "./App.vue";
// import routes this way
import { routes } from "./routes.js";

// rest of the code here

const app = new Vue({
    el: '#app',
    router, // replace routes with router
    render: h => h(App), //indicate the App component inside render function
});

if the above does not work, then try

// import the App.vue file
import App from "./App.vue";
// import routes this way
import { routes } from "./routes.js";

// rest of the code here

const app = new Vue({
    router, // replace routes with router
    render: h => h(App), //indicate the App component inside render function
}).$mount("#app");

the #app here is the id of the div in your index.html file

the Vue constructor expects router object, not routes array

edited Oct 28, 2019 at 15:29

answered Oct 28, 2019 at 14:55

s4k1b

3,1151 gold badge11 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

FlowMafia Over a year ago

alright, it rendered the component but the link in the router-view doesn't work, any idea why?

s4k1b Over a year ago

any errors showing ? Your ExampleComponent should be shown in place of router-view

FlowMafia Over a year ago

[vue-router] Route with name 'example' does not exist In console

FlowMafia Over a year ago

for some reason now it says that routes was not found I have routes.js in resources/js/routes.js

s4k1b Over a year ago

make sure the relative path of import is correct ? import routes from './routes'; will only work if the app.js is in the same directory as routes.js file

|

Collectives™ on Stack Overflow

Vue js + Laravel 6, router-view not rendering component

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related