Create Vue.js Layout and Navigation with Nuxt.js

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 5 years ago

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.

[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.

egghead
egghead
~ 4 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today