#activeClass Nuxt Link

29 messages · Page 1 of 1 (latest)

daring yoke
#

The docs tell me active <NuxtLink> has a property activeClass, but it wont work. active-class as property will work. Why is it? Do i use the right one, or is it a matter of version?

lean pasture
#

router-link-active
and
router-link-exact-active

#

/about/contact

/about = router-link-active
/about/contact = router-link-exact-active

#

but you have to use NuxtPage, and nested NuxtPages

daring yoke
lean pasture
#

the default activeClass for NuxtLinks

#

i was giving you an example, if the current route is /about/contact any NuxtLink elements linking to /about/contact will have router-link-exact-active class

#

but, in order for any of this to work, you need to be using NuxtPage

daring yoke
lean pasture
#

why do you think i'm assuming that you aren't?

#

i'm just saying how it works, i have no idea how you've configured things

#

are you just trying to configure custom active link classes?

#

or are you having trouble getting the active classes to work in general

daring yoke
lean pasture
#

with any vue/nuxt props, any camel-case props are written with dashes in an element

#

so activeClass technically is active-class

#

but if, for instance, you were using defineNuxtLink, it would be activeClass

# 
export default defineNuxtLink({
  componentName: 'CustomNuxtLink',
  activeClass: 'my-active-class',
  exactActiveClass: 'my-exact-active-class',
});
#

that documentation could probably be worded better

daring yoke
#

yes that hits the point, i wonder if i do not get the concept or if its a failure. so it seems to be grown and the docs refer to defineLink while i thought it describes the element tag.

lean pasture
#

but that naming/usage methodology basically applies for everything in vue/nuxt when you're moving between <script> and templates/html

#

so i think the author has just assumed that was implied knowledge

#

even that's a bad description 😄

daring yoke
lean pasture
#

haha good question:)

#

i guess that depends on your requirements, like if you had a special use case for tracking particular types of links