[Vue warn]: Unknown custom element: <router-view>, possibly module conflict?

Question

I am trying to use vue-router inside my project adopting from enter link description here.

./router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import VesselSearch from '../components/VesselSearch';
import Login from '../components/Login';

Vue.use(VueRouter);

let router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'vessel-search',
            component: VesselSearch,
            meta: {
                requiresAuth: true,
            }
        },
        {
            path: '/login',
            name: 'login',
            component: Login,
            meta: {
                guest: true
            }
        },
    ]
})

export default router;

main.js

import '@fortawesome/fontawesome-free/css/all.min.css'
import 'mdbvue/lib/css/mdb.min.css'
import Vue from 'vue/dist/vue.js';
import App from './App';
import router from './router';
import InstantSearch from 'vue-instantsearch';

Vue.config.productionTip = false;

Vue.use(InstantSearch);

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

If I check using npm list vue-router I got:

+-- [email protected]
| `-- [email protected]  deduped
`-- [email protected]

Seem like I have 2 vue-router module, one included in mdbootstrap module. If it is the problem, how can I fixed it?

Answer 1

The problem here is that you were registering the router to another instance of vue and that instance does not have the main component. Here is the solution In your router/index.js remove the lines

 import VueRouter from 'vue-router';
 Vue.use(Router)

and in your main.js add these lines

 import VueRouter from 'vue-router';
 Vue.use(Router)

You check it here https://codesandbox.io/s/lively-voice-1dutp