Nuxt content and nested route active links
I'm trying to use the document driven mode workaround with NuxtContent v3 with the catch all route
[...slug].vue (https://content.nuxt.com/docs/getting-started/migration#implement-document-driven-mode-in-v3)
I'm running into an issue with the router active class not being added to nested pages however. It seems nested vue router pages are not being created for nested pages in the content directory.
Is there a way around that without having to define the nested routes in the pages directly as well?2 Replies
Hi @Kerensky. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the knowledge sources, I can offer some insights into your question about Nuxt Content and nested route active links. However, it's important to note that the knowledge sources don't provide a direct solution to your specific issue.
The document-driven mode workaround you're referring to is indeed mentioned in the Nuxt Content migration guide. This approach uses a catch-all route
[...slug].vue to handle content pages.
However, the issue you're experiencing with router active classes not being added to nested pages is not directly addressed in the provided knowledge sources. This problem seems to be related to how Nuxt handles routing when using the catch-all approach with Nuxt Content.
There are a couple of points to consider:
1. The catch-all route approach doesn't automatically create nested Vue Router pages for content in subdirectories. This is likely why you're not seeing the active classes applied as expected.
2. There's a known issue with optional route parameters and active classes, as mentioned in a GitHub issue. While this isn't exactly your situation, it suggests that there might be some limitations or bugs related to active classes and dynamic routing in Nuxt.
Unfortunately, the knowledge sources don't provide a direct solution to your specific problem of getting active classes to work with nested content pages when using the catch-all route approach with Nuxt Content.
To find a solution, you might need to:
1. Explore if there are any Nuxt Content-specific solutions for handling nested active links.
2. Consider using a custom solution to manually add active classes based on the current route.
3. Investigate if there are any recent updates or workarounds in the Nuxt or Nuxt Content documentation that aren't reflected in these knowledge sources.
If you need a more definitive answer or solution, I recommend checking the latest Nuxt Content documentation or reaching out to the Nuxt community forums for more up-to-date information on handling this specific use case.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@482370610626953227> Kapa.ai is still learning and improving, please let me know how I did by reacting below.