How to add Header and Footer in Nuxt 3

Also, we will fix a bug when you may see that after navigating between pages the footer is "jumping".

Understanding Nuxt 3's Component Architecture

Nuxt 3 is all about breaking things into smaller pieces called "components." It's a bit like building with Lego — you create different parts and snap them together to make something cool. Headers and footers are like those special Lego blocks that you can use over and over.

Using the Header and Footer

Once the header and footer are ready, we'll make them show up on all pages using layout. Or, if you want, you can pick where it shows up — like on some pages and not on others. In that case, you will need to create different layouts.

Create a default layout

In my application I don't need different layouts. I will have just one called default.vue. So, create a folder layouts in a root directory of your project and create a default.vue file. In that file we will have that piece of code:

<template>
  <div>
    <slot />
  </div>
</template>

Once we done with layout we need to make it visible on the page - add the layout to the app.vue file like so:

<template>
  <NuxtLayout>
    <Header />
    <NuxtPage />
    <Footer />
  </NuxtLayout>
</template>

Troubleshooting

If you paste the code above in your project and footer "jumps" to the top of the page when you navigate between pages, that's because we need to make our page as a unique node. To make that we need to put our <NuxtPage /> into div.

<template>
  <NuxtLayout>
    <Header />
    + <div>
        <NuxtPage />
    + </div>
    <Footer />
  </NuxtLayout>
</template>

Now that glitch effect should be gone.

Conclusion

Headers and footers might seem like small things, but they're super important in making a website look and feel just right. With Nuxt 3, it's easy to make these parts and use them again and again.