title: Nuxt.js - How to use component inside layout?
body: <p>So I started playing around with Nuxt.js. 
  I want to modify the default layout file to have a header and a footer.
  For that I want to create a Header and a Footer component and place the page content tag (<code>&lt;nuxt/&gt;</code>) between them. However nothing happens. </p>
  
  <p>Here is my default.vue layout file:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;header/&gt;
      &lt;nuxt/&gt;
      &lt;h1&gt;Footer&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Header from "~/components/Header.vue";
  
  export default {
    components: {
      Header
    }
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  ...
  &lt;/style&gt;
  </code></pre>
  
  <p>Here is my Header.vue component file:</p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
  &lt;h1&gt;Header&lt;/h1&gt;
     &lt;div class="links"&gt;
            &lt;nuxt-link to="/" class="button--grey"&gt;Home&lt;/nuxt-link&gt;
            &lt;nuxt-link to="/about" class="button--grey"&gt;About&lt;/nuxt-link&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;style&gt;
  .links {
    padding-top: 15px;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>Is there something wrong with this? Can I use components inside layouts files in the first place? Do I have to register newly created components separately somewhere else? </p>
  
  <p>Sadly, there isn't much information specifically about this. How can I achieve it? </p>
  
  <p>Thanks in advance!</p>