title: Vue.js - Unknown custom element: <router-view>
body: <p>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: </p>
  
  <blockquote>
    <p>Unknown custom element: <code>&lt;router-view&gt;</code> - did you register the component
    correctly? For recursive components, make sure to provide the "name" option</p>
  </blockquote>
  
  <p>Am i registering the component wrongly? Any help is much appreciated, my code below:</p>
  
  <p>app.js</p>
  
  <pre><code>import Vue from 'vue'
  import AppLayout from './theme/Layout.vue'
  import router from './router'
  
  const app = new Vue({
    router,
    ...AppLayout
  })
  
  export { app, router }
  </code></pre>
  
  <p>router.js </p>
  
  <pre><code>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}
    ]
  })
  </code></pre>
  
  <p>export default router</p>
  
  <p>Layout.vue</p>
  
  <pre><code> &lt;template&gt;
    &lt;div&gt;
      &lt;app-header&gt;&lt;/app-header&gt;
      &lt;section class='main-section section'&gt;
        &lt;div class='container content'&gt;
          &lt;router-view&gt;&lt;/router-view&gt;
        &lt;/div&gt;
      &lt;/section&gt;
      &lt;app-footer&gt;&lt;/app-footer&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import AppHeader from './AppHeader.vue'
  import AppFooter from './AppFooter.vue'
  export default {
    components: {
      'app-header': AppHeader,
      'app-footer': AppFooter
    }
  }
  &lt;/script&gt;
  &lt;style lang='scss'&gt;
  $primary: #287ab1;
  @import '~bulma';
  
  &lt;/style&gt;
  </code></pre>
  
  <p>I am following this guy's code <a href="https://github.com/bstavroulakis/vue-spa" rel="nofollow noreferrer">Here</a> and his <a href="https://app.pluralsight.com/library/courses/vue-js-single-page-applications/table-of-contents" rel="nofollow noreferrer">course</a></p>