How correctly include VueRouter in Laravel Project?

Question

I try to implement VueRouter in Laravel project but arreas error Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

app.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './components/App'
import ExampleComponent from './components/ExampleComponent'
import ExampleComponent1 from './components/ExampleComponent1'

Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        {
            path: '/',
            component: ExampleComponent
        },
        {
            path: '/example',
            component: ExampleComponent1
        }
    ]
})

const app = new Vue({
    el: '#app',
    router,
    template: `<app></app>`,
    components: {
        App
    }
})

components/App.vue

<template>
    <div>
        <div>
            <router-link :to="'/'"></router-link>
            <router-link :to="'/example'"></router-link>
        </div>
        <div>
            <router-vue></router-vue>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

how can I connect correctly vue-router?

I inserted router after components:{App} in const app. and it's working) — Andrey Fugas
Yep, that is your problem. Alternatively, you can do this: const app = new Vue({ el: '#app', router, render: h => h(App) }) — Noogen

Hassan Ahmed Hassan Ahmed · Accepted Answer · 2019-06-19T11:50:38

I see that you've misspelled <router-view /> in App.vue which is probably causing the warning.

How correctly include VueRouter in Laravel Project?

1 Answers