Style Navigation Based on Route in Nuxt

I'm going to ditch this header and make it so the navigation shows me where I am instead of relying on this. I'll do that real quick by jumping between each of these pages and deleting it.

[pause]

Now with all of them gone, we can focus on the navigation. The navigation is in the default view. First with each of these next links, I'm going to add a couple classes from Takions, one being the link which essentially gets rid of the underline and then other being underline hover which gives me an underline when I hover on it. It looks like this.

To know which one of these is currently active, let's add an underline. We do that by specifying a class. I'll call this nux link active and then just say text decoration underline. Right now we're on the show page.

You can see show is underlined and home is underlined. That's because the current URL matches show and just the simple forward slash. To fix that, there's a convenient class called exact active. You can see because we're using exact active instead of just active that home no longer shows up. When I click on these and they lose focus, they stay underlined now.

I'm also just going to say font weight bold to make it stand out a tiny bit more. The last tip here is in your config if you want to change the name of that class, the default is just nux link exact active. You can always just say router link active class something else. But I'm just going to use the default because nux link exact active works fine just for me.