VueJs router link not working in Laravel

0
votes

As Laravel comes with vuejs out the box decided to try to implement the router link.

I see this error when I inspect my console:

Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

This is how my app.js currently looks like:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Articles from './components/Articles.vue'
import Navbar from './components/Navbar.vue'

Vue.use(VueRouter);

const routes = [
    {
        path: '/', component: Articles
    },
    {
        path: '/contact', component: Navbar
    }

]
const router = new VueRouter({routes: routes})

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

On my app.blade template( the one that comes by default with laravel) I added this:

<li>
     <router-link class="nav-link" :to="'/'">Home</router-link>
</li>

Also when I inspeted the element I saw that the router-link tag did not get converted. I have vue-router and resource in y dependencies

"dependencies": {
    "vue-resource": "^1.5.0",
    "vue-router": "^3.0.1"
}

My aap.blade file I have the component

<div class="container">
    <articles></articles>
</div>

How can I use routing in laravel?

Thanks in advance

1
vuejs2vue-router

1 Answers

2
votes

Please provide id as 'app' to your container div like below:

<div class="container" id="app">
    <articles></articles>
</div>