"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.