Recently, I decided to dive into Nuxt.js and experiment with its capabilities. One idea I had was to customize the default layout by adding a header and footer to it. To achieve this, I planned on creating separate Header and Footer components and enclosing the page content between them using the <nuxt/> tag. However, to my surprise, nothing seemed to be working as expected.
Below is a snippet of 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>
I also have a Header.vue component file in my project, which looks like this:
<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>
I'm now left wondering if there's an issue with how I've implemented these components within the layout file. Can components even be used inside layout files like this? Do I need to register new components separately elsewhere for them to work properly?
Unfortunately, I haven't been able to find much guidance on this specific topic. If anyone has insights on how to make this setup function correctly, I would greatly appreciate it!
Thank you in advance for any assistance!