[Vue warn]: Unknown custom element: <router-view> - did you register the component correctly?
42,813
Solution 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
Solution 2
Change:
Vue.use('VueRouter');
To:
Vue.use(VueRouter);
Related videos on Youtube
Author by
Kalreg
Updated on July 09, 2022Comments
-
Kalreg almost 2 years
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?
-
Kalreg almost 6 yearsThe reason was Vue.use('VueRouter') instead of Vue.use(VueRouter)
-
Alex over 4 yearsChange: Vue.use('VueRouter') ->To: Vue.use(VueRouter)
-
-
Iosif Livadaru about 4 yearsI tried your answer and it works only if you put just "router" instead of "router: router"
-
sɐunıɔןɐqɐp over 3 yearsWe don't need another duplicate answer. See: stackoverflow.com/a/50963242/823321