"Unknown custom element: <router-link>" Upgraded to Vue 2

Question

Upgraded an app from vue 1 and vue-router 0.7 and getting this error in the console

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in component ...[path to component is called in]

import Vue from 'vue';
import VueResource from 'vue-resource';
import VueRouter from 'vue-router';
import gsap from 'gsap';

Vue.use( VueResource );
Vue.use( VueRouter );

window.flipster = require( 'jquery.flipster' );
window.spritespin = require('SpriteSpin');

// Main Layout Components
import Menu from './components/Menu.vue';
import Section from './components/Section.vue';

// Controller Layout Components
import ControllerMenu from './components/Controller/Menu.vue';
import ControllerSection from './components/Controller/Section.vue';

// Generic Components
import Tabs from './components/Tabs.vue';
Vue.component( 'tabs', Tabs );

import Tab from './components/Tab.vue';
Vue.component( 'tab', Tab );

import Chart from './components/Chart.vue';
Vue.component( 'chart', Chart );

import ChartDev from './components/ChartDev.vue';

import Datastore from './DataStore';
Vue.use( Datastore );

// controller check and other useful functionality
import Helpers from './Helpers';
Vue.use( Helpers );

import App from './App.vue';

window.eventHub = new Vue();

var router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'menu',
            component: ControllerMenu
        },
        {
            path: 'sections/:sectionId',
            name: 'section',
            component: ControllerSection
        },
        {
            path: 'chart/:datasetId',
            name: 'chart',
            component: ChartDev
        }
    ]
});

new Vue({
    router: router,
    render( createElement ) {
        return createElement( App )
    }
}).$mount( '.container' );

The routes themselves work fine if I navigate to them using the address bar, it's just that router-link component not being a thing.

Any ideas?

Answer 1

You are not initializing the router using Vue.use. You need to do the following:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

Ref: https://router.vuejs.org/en/installation.html

EDIT: More thoughts after comments #1 and #2:

You are mounting the app using .$mount( '.container' ). While this can work as expected, using a class selector is risky. Are you sure you have only one <div class="container"> element? You can possibly try using an id selector in a much more simplified way as in docs:

new Vue({
    el: "#app",
    router: router,
    render: h => h(App)
})

While this has nothing to do with router-link being unavailable, I suspect there could be multiple instances of Vue, if you have multiple container elements. Other than the above, I cannot find anything else wrong with the code.

Answer 2

Perhaps something went wrong when you updated vue-router, are you definately using the correct version? Try running npm list vue-router from within your project root and it should output a 2.0.x version:

vue-router@2.0.3

anything less than v2 wouldn't have router-link, if this is the case try:

npm uninstall vue-router
npm install vue-router --save-dev

---

If the version is correct then may be worth simplifying the project to troubleshoot this. I made a fiddle:

https://jsfiddle.net/thebigsurf/ajpuw8hq/

If you copy across the html & js from this basic set up does it fix the issue? If so it may be that one of your other Vue.use() plugin configs is breaking vue-router.

Answer 3

For anybody who is using Jest and doesn't want to do any testing around router-link - but want to rid of the compilation error - simply stub it out:

    wrapper = shallowMount(Flow, {
        propsData: {},
        mocks: {},
        stubs: ['router-view'], // add this
        store,
        localVue,
    });