NuxtLink not setting active class
I have a route like
/handbook/slug(.*)* and a <NuxtLink to"/handbook"> in my page header
When I open /handbook, the activeClass is applied to the link but when I open any child page like /handbook/foo/bar the link is not "active"
If I look at vue router docs, it looks like that feature is meant to work with routes with children but that is not how nuxt generates these routes.
Is this a little bit of a bug?3 Replies
Hi @tpluscode. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
You're correct in observing that Nuxt's file-based routing does not always generate nested routes in the way Vue Router's "active link" logic expects. In Nuxt, if you have a catch-all route like
This is expected behavior due to Nuxt's route generation, not a bug, but it does require a manual solution if you want parent links to remain active for all child/catch-all routes. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
/handbook/[...slug].vue, Nuxt generates a flat route structure rather than a parent-child relationship between /handbook and its subpaths. As a result, the default activeClass behavior of <NuxtLink to="/handbook"> will only be applied when the route is exactly /handbook, not for deeper paths like /handbook/foo/bar—because, from the router's perspective, these are not children of /handbook but separate, parallel routes.
This is a known nuance of Nuxt's routing system. The Vue Router docs describe "active link" behavior in the context of nested routes, but Nuxt's catch-all and dynamic routes do not always create such nesting automatically. This means the "active" class will not be applied to the parent link when visiting a catch-all child route, unless you implement custom logic or use the exact prop and/or custom classes to handle this scenario yourself.
This is not exactly a bug, but rather a limitation of how Nuxt's file-based routing maps to Vue Router's expectations for nested routes and active link detection. If you want the parent link to be "active" for all child routes, you may need to manually check the current route and apply the class yourself, or use the activeClass/exactActiveClass props with custom logic as described in the Nuxt and Vue Router documentation:
- NuxtLink API: activeClass and exactActiveClass
- Nuxt Routing and Nested Routes
- Vue Router: Active Links
If you want to ensure the parent link is active for all subroutes, you can use a computed property to check if the current route starts with /handbook and apply your own class accordingly. This is a common workaround in Nuxt projects.
In summary:This is expected behavior due to Nuxt's route generation, not a bug, but it does require a manual solution if you want parent links to remain active for all child/catch-all routes. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@555413648382623754> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Hello, @tpluscode
No worry.
If you have some issues, you can fix issues via here.
this channel is very good.
NIce to meet you