round belfry
Hey guys I'm currently working on a navbar, and I'm trying to achive, that if I have the path /blog/postOne open, that the NuxtLink leading to the route /blog will still be effected by the activeClass.
I tried using this folder structures to achive that:
pages
|- blog.vue (NuxtPage used here)
|- blog
|- blogOne.vue
|- index.vue
inner cove
yes it should
as long as you've got NuxtPage in blog.vue and that file is next to the blog folder
any child pages in the blog folder should load inside the NuxtPage in blog.vue
round belfry
The issues is not, that the pages are not loaded properly, but that only the link to the child item is effected by ```
activeClass: "text-toronto font-bold",
exactActiveClass: "text-toronto font-bold"
Here is how it currently look (same issue but in a different project)
I'm on /modules/installed and the installed link in the Nav is highlighted, but the Mpdules Liink should be Highlighted as well.
inner cove
did you inspect the elements and check their classes
i'm not 100% sure "text-toronto font-bold" will work
router: {
linkActiveClass: 'your-custom-active-link',
linkExactActiveClass: 'your-custom-exact-active-link',
}
defaults are
activeClass: 'router-link-active',
exactActiveClass: 'router-link-exact-active',
round belfry
The classes are properly set on the a tag for Installed, but there are no classes set at the a tag for Modules. But if i go to just /modules, it is setting the classes for the a Tag with modules perfectly fine.
inner cove
not sure, it should definitely work i use this in a few projects
would need a reproduction
round belfry
So that is interesting. I was trying to use this custom component for the link, so that the styling only effects specific links, but that did not work. When using just NuxtLink itself and styling the default classes it works fine.
Here is the component i tried to use: ```ts
export default defineNuxtLink({
componentName: "PolarisLink",
activeClass: "text-toronto font-bold",
exactActiveClass: "text-toronto font-bold"
});
Just settled on using the NuxtLink now. As it works perfectly fine.