title: Unknown custom element: <router-link> in VueJS
body: <p>I have attempted to extract my navigation logic in to a sub component, the structure is as follows: </p>
  
  <p><code>App.vue -- Header.vue --- Navigation.vue</code></p>
  
  <p>I am attempting to use the  attribute in Navigation.vue but am recieving the following error:</p>
  
  <p><code>Unknown custom element: &lt;router-link&gt; - did you register the component correctly? For recursive components, make sure to provide the "name" option.</code></p>
  
  <p>Here is my app so far, pretty simple an basic. </p>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>require('bootstrap-sass/assets/stylesheets/_bootstrap.scss')
  // require('bootstrap-sass/assets/javascripts/bootstrap.js')
  require('./assets/sass/app.scss')
  
  import Vue from 'vue'
  import VueRouter from 'vue-router'
  import VueMoment from 'vue-moment'
  import VueResource from 'vue-resource'
  
  import { configRouter } from './routes'
  
  import App from './App'
  
  // Debug mode
  Vue.config.debug = true
  
  // Devtools enabled
  Vue.config.devtools = true
  
  // Silence logs and warnings
  Vue.config.silent = false
  
  // install router
  Vue.use(VueRouter)
  
  // install vue-moment filter
  Vue.use(VueMoment)
  
  // install resource
  Vue.use(VueResource)
  
  // create router
  var router = new VueRouter({
      history: true,
      saveScrollPosition: true
  })
  
  // configure router
  configRouter(router)
  
  /* eslint-disable no-new */
  // new Vue({
  //     el: 'body',
  //     components: { App, router }
  // })
  router.start(App, '#app')
  </code></pre>
  
  <p><strong>App.vue</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;site-header&gt;&lt;/site-header&gt;
          &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import SiteHeader from './components/Header'
  
      export default {
          components: {
              SiteHeader
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Header.vue</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;header class="masthead container-fluid"&gt;
          &lt;div class="row"&gt;
  
              &lt;!-- Branding --&gt;
              &lt;div class="col-md-3"&gt; &amp;nbsp; &lt;/div&gt;
              &lt;!-- / Branding --&gt;
  
              &lt;!-- Primary Navigation --&gt;
              &lt;navigation&gt;&lt;/navigation&gt;
              &lt;!-- / Primary Navigation --&gt;
  
              &lt;!-- Actions --&gt;
              &lt;div class="col-md-3"&gt; &amp;nbsp; &lt;/div&gt;
              &lt;!-- / Actions --&gt;
  
          &lt;/div&gt;
      &lt;/header&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import Navigation from './Navigation'
  
      export default {
          components: {
              Navigation
          },
          data () {
              return {
                  msg: 'Hello World!'
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Navigation.vue</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="col-md-6"&gt;
          &lt;ul class="primary-navigation list-inline list-unstyled"&gt;
              &lt;li&gt; &lt;router-link to="/about"&gt;About&lt;/router-link&gt; &lt;/li&gt;
              &lt;li&gt; TEST &lt;/li&gt;
              &lt;li&gt; TEST &lt;/li&gt;
              &lt;li&gt; TEST &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      import VueRouter from 'vue-router'
  
      export default { components: { VueRouter } }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <p>Versions: vue 1.0.28 &amp; vue-router 0.7.13</p>