Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 833 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Create Vue.js Layout and Navigation with Nuxt.js

1:40 JavaScript lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Nuxt.js enables you to easily create layout and navigation by replacing the default App.vue template with your own _app.vue template. Then you simply surround your content 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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?