Nuxt•2mo ago

Nuxt active-link-class

I have the following folder structure: Blog -> index.vue Blog -> [_slug].vue I want Navigation link to have an active class whenever a user visist the nested slug page. Currently the route is only active when directly visiting Blog -> index.vue

6 Replies

kapa.ai•2mo ago

Hi @SaltTheWound. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To make your navigation link have an active class when visiting nested slug pages, you need to modify how the active class is applied to your links. In Nuxt, there are a few ways to handle this. Using <NuxtLink> with exact prop When using <NuxtLink>, you can control the active class behavior. By default, <NuxtLink> applies the active class only when the route exactly matches. For your case, you want the parent route to be considered active when child routes are visited. Here's how you can implement this:

<template>
  <NuxtLink to="/blog" :exact="false">Blog</NuxtLink>
</template>

<template>
  <NuxtLink to="/blog" :exact="false">Blog</NuxtLink>
</template>

The :exact="false" prop tells Nuxt to apply the active class when the current route starts with the link's path. Using <ULink> from Nuxt UI If you're using Nuxt UI, you can use the <ULink> component which provides more control:

<template>
  <ULink to="/blog" :exact="false">Blog</ULink>
</template>

<template>
  <ULink to="/blog" :exact="false">Blog</ULink>
</template>

The <ULink> component is a wrapper around <NuxtLink> that provides additional props like inactive-class and exact to better control active states Link component. Programmatic approach You can also programmatically determine if a link should be active by checking the current route:

<template>
  <NuxtLink 
    to="/blog" 
    :class="{ 'your-active-class': isActive }"
  >
    Blog
  </NuxtLink>
</template>

<script setup>
const route = useRoute()
const isActive = computed(() => route.path.startsWith('/blog'))
</script>

<template>
  <NuxtLink 
    to="/blog" 
    :class="{ 'your-active-class': isActive }"
  >
    Blog
  </NuxtLink>
</template>

<script setup>
const route = useRoute()
const isActive = computed(() => route.path.startsWith('/blog'))
</script>

This approach gives you complete control over when the active class is applied. You can see a similar pattern in the Nuxt UI Header component example Within app.vue. Customizing active class You can customize the default active class in your nuxt.config.ts:

export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        activeClass: 'your-custom-active-class',
      }
    }
  }
})

export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        activeClass: 'your-custom-active-class',
      }
    }
  }
})

This will change the default active class for all <NuxtLink> components in your application NuxtLink props. Remember that the active class behavior in Nuxt 3 is slightly different from Nuxt 2, as explained in the migration guide Pages and Layouts. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@210839019674796033> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

SaltTheWoundOP•2mo ago

@kapa.ai :exact="false" does not seem to exist

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're right, and I apologize for the confusion. The :exact="false" prop isn't available directly on <NuxtLink> in Nuxt 3 as it was in Nuxt 2. This is because Nuxt 3 uses Vue Router 4, which removed the exact prop. Alternative approaches for active link classes 1. Using <ULink> from Nuxt UI If you're using Nuxt UI, the <ULink> component does provide an exact prop that works similarly to the old behavior:

<template>
  <ULink to="/blog" :exact="false">Blog</ULink>
</template>

<template>
  <ULink to="/blog" :exact="false">Blog</ULink>
</template>

The <ULink> component was specifically created to provide the same API as NuxtLink had in Nuxt 2 / Vue 2, including the exact prop Link component. 2. Programmatic approach (recommended) For a more reliable solution without additional dependencies, use a programmatic approach:

<template>
  <NuxtLink 
    to="/blog" 
    :class="{ 'your-active-class': isActive }"
  >
    Blog
  </NuxtLink>
</template>

<script setup>
const route = useRoute()
const isActive = computed(() => route.path.startsWith('/blog'))
</script>

<template>
  <NuxtLink 
    to="/blog" 
    :class="{ 'your-active-class': isActive }"
  >
    Blog
  </NuxtLink>
</template>

<script setup>
const route = useRoute()
const isActive = computed(() => route.path.startsWith('/blog'))
</script>

3. Using slot props with custom implementation You can also use the slot props of <RouterLink> (or <NuxtLink>) for complete control:

<template>
  <NuxtLink v-slot="{ href, navigate, isActive, isExactActive }" to="/blog">
    <a
      :href="href"
      @click="navigate"
      :class="{ 'active-class': isActive || route.path.startsWith('/blog') }"
    >
      Blog
    </a>
  </NuxtLink>
</template>

<script setup>
const route = useRoute()
</script>

<template>
  <NuxtLink v-slot="{ href, navigate, isActive, isExactActive }" to="/blog">
    <a
      :href="href"
      @click="navigate"
      :class="{ 'active-class': isActive || route.path.startsWith('/blog') }"
    >
      Blog
    </a>
  </NuxtLink>
</template>

<script setup>
const route = useRoute()
</script>

This approach is based on the slot props pattern shown in the Stack Overflow answer Vue Router <router-link> with custom attribute + slot template. The removal of the exact prop is mentioned in the Vue Router migration guide from Vue 2, which is why this behavior changed in Nuxt 3. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@210839019674796033> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Orbis•2mo ago

Nuxt link should have active class and exact active class

Gaming

Programming

Nuxt active-link-class

Did you find this page helpful?