Nuxt•2w ago

NuxtLink active boolean

Is there any way to get the NuxtLinks active status as a value in the links scope? Example <NuxtLink to="/settings"><MyCustomButton :selected="?????" /></NuxtLink>

8 Replies

kapa.ai•2w ago

Hi @bnason. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, there is a way to get the active status of a NuxtLink as a value in the link's scope. The <ULink> component, which is a wrapper around <NuxtLink>, provides this functionality through its slot props. According to the UI Nuxt Link documentation (https://ui.nuxt.com/components/link), you can use the #default slot to access the isActive property. Here's how you can modify your example to achieve what you're looking for:

<ULink to="/settings">
  <template #default="{ isActive }">
    <MyCustomButton :selected="isActive" />
  </template>
</ULink>

<ULink to="/settings">
  <template #default="{ isActive }">
    <MyCustomButton :selected="isActive" />
  </template>
</ULink>

In this example, the isActive boolean is provided by the ULink component and can be used to set the selected prop of your MyCustomButton component. If you prefer to use NuxtLink directly, you can achieve a similar result by using the activeClass and inactiveClass props as described in the Nuxt documentation (https://nuxt.com/docs/api/components/nuxt-link#props). However, this method doesn't provide a direct boolean value but rather applies classes based on the active state:

<NuxtLink 
  to="/settings"
  active-class="selected"
  inactive-class="not-selected"
>
  <MyCustomButton />
</NuxtLink>

<NuxtLink 
  to="/settings"
  active-class="selected"
  inactive-class="not-selected"
>
  <MyCustomButton />
</NuxtLink>

In this case, you would need to style your MyCustomButton based on the parent's classes rather than passing a boolean prop. Remember that the ULink component is part of the Nuxt UI library, so make sure you have it installed and configured in your project to use the first method. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

bnasonOP•2w ago

@kapa.ai I don't use Nuxt UI

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand that you don't use Nuxt UI. In that case, let's focus on the options available with the standard <NuxtLink> component provided by Nuxt. For <NuxtLink>, there isn't a direct way to get the active status as a boolean value in the component's scope. However, you can achieve a similar result using the activeClass and exactActiveClass props. Here's how you can approach this: 1. Use the activeClass prop to apply a class when the link is active:

<NuxtLink to="/settings" active-class="active-link">
  <MyCustomButton />
</NuxtLink>

<NuxtLink to="/settings" active-class="active-link">
  <MyCustomButton />
</NuxtLink>

2. In your MyCustomButton component, you can use a CSS selector to style it based on the parent's active class:

<template>
  <button :class="{ 'selected': isSelected }">
    <!-- Button content -->
  </button>
</template>

<script setup>
import { computed } from 'vue'

const isSelected = computed(() => {
  return document.querySelector('.active-link') !== null
})
</script>

<template>
  <button :class="{ 'selected': isSelected }">
    <!-- Button content -->
  </button>
</template>

<script setup>
import { computed } from 'vue'

const isSelected = computed(() => {
  return document.querySelector('.active-link') !== null
})
</script>

This approach uses DOM querying, which isn't ideal for performance, but it's a workaround when you don't have access to the active state directly. Alternatively, you could use Vue Router's useRoute composable to check if the current route matches the link's destination:

<template>
  <NuxtLink to="/settings">
    <MyCustomButton :selected="isSettingsRoute" />
  </NuxtLink>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const isSettingsRoute = computed(() => route.path === '/settings')
</script>

<template>
  <NuxtLink to="/settings">
    <MyCustomButton :selected="isSettingsRoute" />
  </NuxtLink>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const isSettingsRoute = computed(() => route.path === '/settings')
</script>

This method compares the current route path with the link's destination, giving you a boolean value you can pass to your custom button. Remember, these are workarounds since <NuxtLink> doesn't provide a slot prop for the active state like Nuxt UI's <ULink> does. If you need more advanced link functionality, you might consider creating a custom link component that wraps <NuxtLink> and provides the active state as a scoped slot prop. Nuxt Link documentation (https://nuxt.com/docs/api/components/nuxt-link#props) provides more information on the available props and usage of <NuxtLink>. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

bnasonOP•2w ago

@kapa.ai Looks like this works <NuxtLink to="/settings" v-slot="{ isActive }"><MyCustomButton :selected="isActive" /></NuxtLink>

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're absolutely correct! I apologize for missing this in my previous responses. Your solution is indeed the correct and most straightforward way to access the active state of a <NuxtLink> component. The v-slot directive you're using is part of the <NuxtLink> API, which provides the isActive property directly. This approach is documented in the Vue Router documentation on Extending RouterLink (https://router.vuejs.org/guide/advanced/extending-router-link.html), which <NuxtLink> is based on. Your code is perfect:

<NuxtLink to="/settings" v-slot="{ isActive }">
  <MyCustomButton :selected="isActive" />
</NuxtLink>

<NuxtLink to="/settings" v-slot="{ isActive }">
  <MyCustomButton :selected="isActive" />
</NuxtLink>

This method allows you to directly access the isActive boolean and pass it to your MyCustomButton component's selected prop. It's clean, reactive, and doesn't require any workarounds or additional computations. Thank you for bringing this to my attention. It's a great solution that directly addresses your original question about getting the NuxtLink's active status as a value in the link's scope. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

Gaming

Programming

NuxtLink active boolean