Nuxt active-link-class
I have the following folder structure:
Blog -> index.vue
Blog -> [_slug].vue
I want Navigation link to have an active class whenever a user visist the nested slug page.
Currently the route is only active when directly visiting Blog -> index.vue
6 Replies
Hi @SaltTheWound. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
To make your navigation link have an active class when visiting nested slug pages, you need to modify how the active class is applied to your links. In Nuxt, there are a few ways to handle this.
Using
<NuxtLink>
with exact prop
When using <NuxtLink>
, you can control the active class behavior. By default, <NuxtLink>
applies the active class only when the route exactly matches. For your case, you want the parent route to be considered active when child routes are visited.
Here's how you can implement this:
The :exact="false"
prop tells Nuxt to apply the active class when the current route starts with the link's path.
Using <ULink>
from Nuxt UI
If you're using Nuxt UI, you can use the <ULink>
component which provides more control:
The <ULink>
component is a wrapper around <NuxtLink>
that provides additional props like inactive-class
and exact
to better control active states Link component.
Programmatic approach
You can also programmatically determine if a link should be active by checking the current route:
This approach gives you complete control over when the active class is applied. You can see a similar pattern in the Nuxt UI Header component example Within app.vue.
Customizing active class
You can customize the default active class in your nuxt.config.ts
:
This will change the default active class for all <NuxtLink>
components in your application NuxtLink props.
Remember that the active class behavior in Nuxt 3 is slightly different from Nuxt 2, as explained in the migration guide Pages and Layouts.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@210839019674796033> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai :exact="false" does not seem to exist
Let me check the knowledge base for you again. One moment! :books:
----------------------
You're right, and I apologize for the confusion. The
:exact="false"
prop isn't available directly on <NuxtLink>
in Nuxt 3 as it was in Nuxt 2. This is because Nuxt 3 uses Vue Router 4, which removed the exact
prop.
Alternative approaches for active link classes
1. Using <ULink>
from Nuxt UI
If you're using Nuxt UI, the <ULink>
component does provide an exact
prop that works similarly to the old behavior:
The <ULink>
component was specifically created to provide the same API as NuxtLink had in Nuxt 2 / Vue 2, including the exact
prop Link component.
2. Programmatic approach (recommended)
For a more reliable solution without additional dependencies, use a programmatic approach:
3. Using slot props with custom implementation
You can also use the slot props of <RouterLink>
(or <NuxtLink>
) for complete control:
This approach is based on the slot props pattern shown in the Stack Overflow answer Vue Router <router-link> with custom attribute + slot template.
The removal of the exact
prop is mentioned in the Vue Router migration guide from Vue 2, which is why this behavior changed in Nuxt 3.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@210839019674796033> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Nuxt link should have active class and exact active class
