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:
Once we done with layout we need to make it visible on the page - add the layout to the
app.vue file like so:
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
Now that glitch effect should be gone.
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.