Nuxt.js - How to use component inside layout? : <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>
