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 (<nuxt/>) between them. However nothing happens.

Here is my default.vue layout file:

<template>

  <div>

    <header/>

    <nuxt/>

    <h1>Footer</h1>

  </div>

</template>



<script>

import Header from ~/components/Header.vue;



export default {

  components: {

    Header

  }

};

</script>



<style>

...

</style>

Here is my Header.vue component file:

<template>

<div>

<h1>Header</h1>

   <div class=links>

          <nuxt-link to=/ class=button--grey>Home</nuxt-link>

          <nuxt-link to=/about class=button--grey>About</nuxt-link>

      </div>

</div>

</template>



<style>

.links {

  padding-top: 15px;

}

</style>

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?

Sadly, there isn't much information specifically about this. How can I achieve it?

Thanks in advance!