title: Adding new components in vue.js?
body: <p>I want to create a component in my components file, and then include this (like ng-include used to) in my base app.</p>
  
  <p>my App.vue looks like this:</p>
  
  <pre><code>   &lt;template&gt;
      &lt;div id="app"&gt;
       &lt;div class="container-fluid"&gt;
        &lt;div class="row&gt;
         &lt;navigation&gt;&lt;/navigation&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
         &lt;router-view&gt;&lt;/router-view&gt;
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/template&gt;
  
     &lt;script&gt;
      export default {
       name: 'app',
      }
     &lt;/script&gt;
  
     &lt;style&gt;
      #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
      }
     &lt;/style&gt;
  </code></pre>
  
  <p>And my main.js file looks like this:</p>
  
  <pre><code>   import Vue from 'vue'
     import App from './App'
     import VueRouter from 'vue-router'
     import homepage from './components/homepage'
     import navigation from './components/navigation'
  
     Vue.use(VueRouter)
  
     const routes = [
      { path: '/', component: homepage}
     ]
  
     const router = new VueRouter({
      routes,
      mode: 'history'
     })
  
     new Vue({
  
      el: '#app',
      template: '&lt;App/&gt;',
      components: { 
       App, navigation 
      },
      router
     }).$mount('#app')
  </code></pre>
  
  <p>navigation.vue:</p>
  
  <pre><code>    &lt;template&gt;
       &lt;div&gt;
        &lt;p&gt;test&lt;/p&gt;
       &lt;/div&gt;
      &lt;/template&gt;
  
      &lt;script&gt;
       export default {
        name: 'navigation'
       }
      &lt;/script&gt;
  </code></pre>
  
  <p>When I run the above I get:</p>
  
  <p>[Vue warn]: Unknown custom element:  - did you register the component correctly? For recursive components, make sure to provide the "name" option.</p>
  
  <p>found in</p>
  
  <p>--->  at src/App.vue
         </p>
  
  <p>I know how to add a vue.component, but i what I want is an external component, like the homepage, pulled from the components folder, and included in the base app.</p>