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.

https://app.egghead.io/api/v1/lessons/vue-create-vue-js-layout-and-navigation-with-nuxt-js/subtitles

Create Vue.js Layout and Navigation with Nuxt.js

[00:00] 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.

[00:14] 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.

[00:41] Elements we put around it like an <H1> with "I'm the layout" above it, and an <H2> of "I'm below." When I refresh will show up above and below your current page.

[00:55] 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.

[01:16] 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.

[01:29] 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.

Create Vue.js Layout and Navigation with Nuxt.js

Share this video with your friends