Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Create Vue.js Layout and Navigation with Nuxt.js

    John LindquistJohn Lindquist

    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.

    vueVue.js
    nuxtNuxt.js
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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

    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.

    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.

    Discuss

    Discuss