Unknown custom element: <router-link> in VueJS

Question

I have attempted to extract my navigation logic in to a sub component, the structure is as follows:

App.vue -- Header.vue --- Navigation.vue

I am attempting to use the attribute in Navigation.vue but am recieving the following error:

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

Here is my app so far, pretty simple an basic.

main.js

require('bootstrap-sass/assets/stylesheets/_bootstrap.scss')
// require('bootstrap-sass/assets/javascripts/bootstrap.js')
require('./assets/sass/app.scss')

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueMoment from 'vue-moment'
import VueResource from 'vue-resource'

import { configRouter } from './routes'

import App from './App'

// Debug mode
Vue.config.debug = true

// Devtools enabled
Vue.config.devtools = true

// Silence logs and warnings
Vue.config.silent = false

// install router
Vue.use(VueRouter)

// install vue-moment filter
Vue.use(VueMoment)

// install resource
Vue.use(VueResource)

// create router
var router = new VueRouter({
    history: true,
    saveScrollPosition: true
})

// configure router
configRouter(router)

/* eslint-disable no-new */
// new Vue({
//     el: 'body',
//     components: { App, router }
// })
router.start(App, '#app')

App.vue

<template>
    <div>
        <site-header></site-header>
        <router-view></router-view>
    </div>
</template>

<script>
    import SiteHeader from './components/Header'

    export default {
        components: {
            SiteHeader
        }
    }
</script>

Header.vue

<template>
    <header class="masthead container-fluid">
        <div class="row">

            <!-- Branding -->
            <div class="col-md-3"> &nbsp; </div>
            <!-- / Branding -->

            <!-- Primary Navigation -->
            <navigation></navigation>
            <!-- / Primary Navigation -->

            <!-- Actions -->
            <div class="col-md-3"> &nbsp; </div>
            <!-- / Actions -->

        </div>
    </header>
</template>

<script>
    import Navigation from './Navigation'

    export default {
        components: {
            Navigation
        },
        data () {
            return {
                msg: 'Hello World!'
            }
        }
    }
</script>

Navigation.vue

<template>
    <div class="col-md-6">
        <ul class="primary-navigation list-inline list-unstyled">
            <li> <router-link to="/about">About</router-link> </li>
            <li> TEST </li>
            <li> TEST </li>
            <li> TEST </li>
        </ul>
    </div>
</template>
<script>
    import VueRouter from 'vue-router'

    export default { components: { VueRouter } }

</script>

What am I doing wrong?

Versions: vue 1.0.28 & vue-router 0.7.13

Mani Jagadeesan · Accepted Answer · 2016-10-25 15:10:51Z

1

From vue-router docs: http://router.vuejs.org/en/essentials/getting-started.html

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
  routes // short for routes: routes
})

I believe the routes need to be passed when you are creating the router instance. I don't really know what your configRouter(router) does, but you can keep things simple till it starts working. After that, you can start modularizing your components and configs.

Also, I am not sure about router.start, it is not specified anywhere in the docs that I can find. The router docs recommend this simple method to create the root instance of your app:

// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
  router
}).$mount('#app')

Probably your app is not router-aware yet, as mentioned in the comments above (from docs, not from me!). This could be a reason for getting that router-link error. Can you try the simpler methods as recommended by the docs?

By the way, which versions of Vue and Vue-Router are you using? If it is not the current versions (vue 2.0.3 and vue-router 2.0.1), then please ignore my answer above.

answered Oct 25, 2016 at 15:10

Mani Jagadeesan

24.3k6 gold badges70 silver badges54 bronze badges

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

6 Comments

Mani Jagadeesan Over a year ago

You also need not specify export default { components: { VueRouter } } in your Navigation.vue, the real issue is at some other place.

ChrisBratherton Over a year ago

Thanks @Mani but I am using vue 1.0.28 & vue-router 0.7.13 The app must be router aware as if I manually type the /about URL it does to the correct view which means the <router-view> attribute is working within App.vue as the views change correctly.

ChrisBratherton Over a year ago

Yea I was trying things but obviously forgot to remove that before posting :)

Mani Jagadeesan Over a year ago

My apologies, I started with Vue very recently, and I have the latest versions in my app. So I won't be able to help you here. Can you specify the versions of vue and vue-router in your question, so that others can take a look at it?

ChrisBratherton Over a year ago

Thanks anyway, I should probably upgrade, it's a start of the project so now would most definitely be a good time to upgrade.

|

Collectives™ on Stack Overflow

Unknown custom element: <router-link> in VueJS

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related