title: Vue basics -- use component in other component
body: <p>I'm trying to use a Vue component (a header) inside of another component, but it's not rendering it correctly.</p>
  
  <p>My code:</p>
  
  <p>App.vue:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;header&gt;&lt;/header&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'app'
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Header.vue:</p>
  
  <pre><code>&lt;template&gt;
      &lt;nav class="nav"&gt;
           &lt;div class="container"&gt;
               &lt;div class="nav-left"&gt;
                   &lt;p class="title"&gt;&lt;/p&gt;
               &lt;/div&gt;
           &lt;/div&gt;
       &lt;/nav&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'header'
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>And, I register my component in main.js, with the file looking like this:</p>
  
  <pre><code>import Vue from 'vue'
  import App from './App'
  import router from './router'
  
  Vue.component('header', require('./components/Header'))
  
  Vue.config.productionTip = false
  
  new Vue({
    el: '#app',
    router,
    template: '&lt;App/&gt;',
    components: { App }
  })
  </code></pre>
  
  <p>With my very limited understanding this should be like rendering a React <code>&lt;Header /&gt;</code> in my App, but this is not working that way. What's getting rendered to the DOM is a plain <code>&lt;header&gt;&lt;/header&gt;</code> tag inside of my <code>#app</code>, which isn't exactly ideal.</p>
  
  <p>What key point am I missing? Thanks!</p>