Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Nuxt.js - How to use component inside layout?

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!

like image 987
Codearts Avatar asked Aug 08 '18 12:08

Codearts


People also ask

How do you use Nuxt components?

To dynamically import a component, also known as lazy loading a component, all you need to do is add the Lazy prefix in your templates. Using the lazy prefix you can also dynamically import a component when an event is triggered.

How does Nuxt layout work?

Nuxt provides a customizable layouts framework you can use throughout your application, ideal for extracting common UI or code patterns into reusable layout components. Layouts are placed in the layouts/ directory and will be automatically loaded via asynchronous import when used.


1 Answers

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.

like image 165
JAM Avatar answered Sep 25 '22 02:09

JAM