Join egghead, unlock knowledge.

Want more egghead?

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

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Build Global Navigation with Layouts and nuxt-link in Nuxt

    John LindquistJohn Lindquist

    nuxt-link’s are used to build out clickable navigation in your application. This lesson walks through building a global navigation that you reuse across pages which allows the user to quickly navigate the news app.

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

    Building a navigation to support all of our new pages is simply a matter of creating a new layout called default. This layout is essentially the same idea as our page loading the component, and then using it.

    The layouts load a page and then use it, but the way it looks is like template and then some sort of a container - a div is fine -- and then Nuxt is where any of our pages will be rendered.

    Above Nuxt, I can create a header as a nav, and this will have some Nuxt links in there with a two property, and we'll need five of them. We generate that, close the sidebar so we have our home link. This is home.

    We have our new link. This is new. We have our show link, so this is show. We have our ask link, so this is ask. And then we have our jobs link, which is jobs.

    I'll run this, fire it up, and you'll see home, new, show, ask, jobs. To style this a bit, let's use the tachyons classes, say this is flex. It has a width of 75 percent.

    Then we can justify around them, see what this looks like. These are nice and spaced out now. We'll just make the font size four, and we'll reuse our code font, then top it off. I'll add a tiny bit of padding. This will work just fine for our needs.

    Discuss

    Discuss