Build a Navigation Component in Vue.js and Use in a Nuxt Layout
You can isolate parts of templates you want to re-use into components, but you can also reuse those components across pages using layouts. This lesson walks you through creation a navigation component then extracting it out into the default layout.
[00:00] I found a nice title link list navigation to use for the navigation our to-do app, so I'll copy and paste that to where nav was. I'll format a bit, and then I can clean it up so that it displays the things that I want to display, and not just the stuff I pasted.
[00:15] We're going to have three links. I'm going to get rid of everything but the first one. That way, I can change this to a Nuxt link, then change the href to a two root URL, and change site name to home.
[00:30] That should look pretty nice for us, and then let's go ahead and add the other two, one for active links, active, the other one for the completed to-dos. That'll be at completed. I'll save this. Then we have home, active, and completed.
[00:46] Let's make it so only the current active link is the one that's highlighted. You'll see if you open the dev tools that if you highlight the active link, and I can't hover off of this without making that disappear, but you'll see a Nuxt link active right over here.
[01:02] We can target a.nuxtlink active in our own styles, so I'll say style. We'll scope this to our component, say a .nuxtlink active to make sure we got it, and we'll say font size five rems. Hit save, and we've obviously found the active link.
[01:22] Let's go ahead and make the inactive links gray and remove the bold, hit save, and now we can just make our active link color black, font weight bold, hit save, and now it looks a little nicer.
[01:36] We can extract this navigation into its own component. I'll cut this out and create inside of the components directory a navigation.view.
[01:48] This needs a template, and inside that template I can paste everything we just made. I'll also go back and grab the style that we declared in here and paste that in here, as well.
[02:00] In my index to use this component, I need to make sure and import navigation from, and this is a special aliased path that uses the tilde, where I can say components without having to navigate up directories with the a dot-dot, and then just navigation, so I'm in pages.
[02:17] I could do dot-dot and then components and navigation, or anywhere in any of the pages, I can just do the tilde components to avoid all those dot-dots.
[02:25] Now that I've imported the navigation, I can say components on my component, say I'll use navigation, and then just go ahead and drop the navigation where it was before, hit save, and we're back to where we were before.
[02:38] I can copy this, paste it in completed where this navigation is, hit save, and now when I navigate to completed, you won't see it show up because I'll have to import and then define it, and I'd have to do that on every component I use that in.
[02:53] Instead of doing that, it makes more sense to grab the navigation and drop it in the default layout, where I can just ask it to live above the Nuxt instance, make sure in my index I don't need this stuff anymore.
[03:05] I'll go back to my default layout, define my script, import it, export defaults object, takes components, and define the navigation. When I hit save, you'll see the navigation shows up even though I'm in the completed path.
[03:19] You'll notice that home is active even though we're on the completed path, and that's because this slash here means that it matches the root path, as well. To fix that, we need to make sure we say exact on anything that might have a child path, so only make this active if this exactly matches what that is.
[03:38] That'll make that go away when we're on the completed path, can navigate home. We're back to home, completed, and we have this navigation across our site.
[03:46] Even if I just make a single page for active that has nothing but a template and an empty dev in it, when I navigate to active, you'll see I have this active page with navigation even though my active page is just a template.
[04:00] It's an empty dev, so this navigation will work across all the pages, and it's refactored into its own component and then used inside of the default layout.