[Vue warn]: Unknown custom element: <router-view> - did you register the component correctly?

Question

I use Vue 2 in CLI mode with webpack-simple. I have following files:

main.js:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Routes from './routes'

Vue.use('VueRouter');

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

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

})

App.vue:

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

<script>

import Loader from './Loader.vue'


export default {
  name: 'app',
}
</script>

<style lang="scss">
</style>

routes.js:

import Game from './components/Game.vue';
import Login from './components/Login.vue';

export default [
    { path: '/', component: Game, name: "Game" },
    { path: '/login', component: Login, name: "Login" }
]

Game.vue and Login.vue looks the same:

<template>
    <div>
        Game
    </div>
</template>

<script>



export default {
  name: 'game',
}
</script>

<style lang="scss">
    div {
        border: 1px solid red;
        width: 100px;
        height: 100px
    }
</style>

unfortunately starting a file gives me an error:

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

Also router-view tag is not changed to proper html. I use vue router for the first time. It' been installed via npm in version 3.0.1

Any advice?

Answer 1

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

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

Hope it will help you

Answer 2

change
Vue.use('VueRouter')
to
Vue.use(VueRouter)

Answer 3

i dont know if its related to your problem or not but you have to use the VueRouter variable "Vue.use(VueRouter)" not a string "Vue.use('VueRouter')";

Answer 4

I had a similar issue, running the commands below fixed it for me.

npm install
npm install vue-router
npm run dev

Answer 5

I had encountered a similar issue while working with Vue js and laravel. Running these commands below solved it:

npm install vue-router
npm run dev

Answer 6

I guess the problem is occurring due to you are passing the vue-router as string in your example.

Use this instead:

import VueRouter from 'vue-router'

and then register it using Vue.use() like this :

Vue.use(VueRouter)

and as you are using es6 style import, you can also use es6 style object shorthand for router.

 const router = new VueRouter({
    routes: Routes
})
new Vue({
  el: '#app',
  render: h => h(App),
  router,

})

Answer 7

Make sure before creating routes and using the VueRouter you need to tell Vue.js that you are using VueRouter. Try this before using the VueRouter:

 import Vue from "vue";
 import VueRouter from "vue-router";
 Vue.use(VueRouter);
 .....
 const routes = [{
      path: '/', component: Home, name: "Home"
     ......
 }]

Good Luck