Vue.js - Unknown custom element: <router-view>

Question

I'm bit new to Vue.js and I'm trying to implement routing to the application but for some reason I'm facing an issue saying:

Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option

Am i registering the component wrongly? Any help is much appreciated, my code below:

app.js

import Vue from 'vue'
import AppLayout from './theme/Layout.vue'
import router from './router'

const app = new Vue({
  router,
  ...AppLayout
})

export { app, router }

router.js

import Vue from 'Vue'
import VueRouter from 'vue-router'
import Category from './theme/Category.vue'
import Login from './theme/Login.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {path: '/', component: Category},
    {path: '/login', component: Login}
  ]
})

export default router

Layout.vue

 <template>
  <div>
    <app-header></app-header>
    <section class='main-section section'>
      <div class='container content'>
        <router-view></router-view>
      </div>
    </section>
    <app-footer></app-footer>
  </div>
</template>
<script>
import AppHeader from './AppHeader.vue'
import AppFooter from './AppFooter.vue'
export default {
  components: {
    'app-header': AppHeader,
    'app-footer': AppFooter
  }
}
</script>
<style lang='scss'>
$primary: #287ab1;
@import '~bulma';

</style>

I am following this guy's code Here and his course

What happens when you change ...AppLayout to render: h => h(AppLayout)? — Daniel
– Daniel, Commented Mar 20, 2019 at 17:36

Ryan · Accepted Answer · 2020-06-03 02:59:18Z

3

Looks like Vue.use(VueRouter) is not doing its thing...

This is likely due to case sensitivity with your Vue import.

import Vue from 'Vue'  // <--- should be 'vue' NOT 'Vue'
import VueRouter from 'vue-router'
import Category from './theme/Category.vue'
import Login from './theme/Login.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {path: '/', component: Category},
    {path: '/login', component: Login}
  ]
})

edited Jun 3, 2020 at 2:59

Ryan

291 silver badge4 bronze badges

answered Mar 20, 2019 at 18:36

Daniel

35.9k17 gold badges115 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Praveen Over a year ago

spot on!, fresh set of eyes always helps, thank you very much for your time.

Daniel Over a year ago

@Daniel: Why then Vue.use() did not cause an error?

Daniel Over a year ago

I don't know ¯\_(ツ)_/¯

Collectives™ on Stack Overflow

Vue.js - Unknown custom element: <router-view>

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related