Nuxt.js enables you to easily create layout and navigation by replacing the default App.vue template with your own
app.vue layout in a
layouts directory. Then you simply surround your content (the
<nuxt> instance) with your navigation and/or layout and you're ready to go.
The home page and the about page have completely different templates, you'll see the home page template here, and the about page template here. If I want to do something like surround these with a navigation that persists across pages, I need to create a layout.
I'll come in here and create a layouts directory, so layouts. Inside of there, a new file called "app.view," meaning that this is the layout for my entire application. This still uses the template, but it also uses what's called a "nextContainer," which surrounds the nextInstance, the index template and the about template will show up right here.
Elements we put around it like an with "I'm the layout" above it, and an of "I'm below." When I refresh will show up above and below your current page.
If I go back home, you'll see my layout still persists. You may need to restart your server if you don't see those changes right away from the dev server. Let's go-ahead and for my about, grab this router link and I'll cut that out and add that to my app above it. We'll call this a nav, and paste that router link.
Go into my index, grab this router link, go back to my app, paste that there, and now, we have this layout with a navigation that when I save, I'm on the home page now.
I can go to about, and home, and about, and home, and this app UI persists. The navigations persists, the footer persists, and the pages inside of it change.