Build Global Navigation with Layouts and nuxt-link in Nuxt
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.
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.