boreal oak
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?
tacit nacelleBOT
Hi @boreal oak. 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 /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:
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.