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!

Solution 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.

Solution 2

You can't use reserved HTML tags for component names. It includes footer, header etc. Here full list of reserved tag names.

So you need to rename your component to something different, for example my-header

Comments

[brpaz]

This seems not to be the case anymore. Just created a "Footer" component just fine

[Aldarund]

@brpaz Footer != footer. It's still a case