Nuxt•9mo ago

Link activeClass for subPaths

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

2 Replies

JanOP•9mo ago

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"

  activeClass: "text-toronto font-bold",
  exactActiveClass: "text-toronto font-bold"

and not the link to the parent. And I'm trying to achieve that both are effected. 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.

JanOP•9mo ago

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. 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:

export default defineNuxtLink({
  componentName: "PolarisLink",
  activeClass: "text-toronto font-bold",
  exactActiveClass: "text-toronto font-bold"
});

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. At least it works now :D. But I find it quite difficult to change the thinking from just using JS to get my functionallity to using methods provided by nuxt and vue.

Gaming

Programming

Link activeClass for subPaths