Nuxt.js - How to use component inside layout?

Question

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!

Answer 1

Try changing <header /> to <Header />. (as the component you have defined for the view is Header with a capital H.)

Capitalization is important. In this case, because header is an existing element tag, Vue will just render an empty tag without complaining.