docs: Navigation Menu Nuxt Link Example fixed

[michaelsieminski]

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

There is currently hydration issues with Nuxt which can kinda be fixed using the useId function and ConfigProvider in app.vue but implementing the Navigation Menu with NuxtLinks like shown currently in the docs, is throwing hydration errors anyways, so the correct way to do it without errors is to apply the classes directly onto the NuxtLink and remove the second Link element.

How it's shown in the docs currently:

<template>
  <NavigationMenuItem>
    <NuxtLink to="/docs">
      <NavigationMenuLink :class="navigationMenuTriggerStyle()">
        Documentation
      </NavigationMenuLink>
    </NuxtLink>
  </NavigationMenuItem>
</template>

Correct implementation:

<template>
  <NavigationMenuItem>
    <NuxtLink to="/docs" :class="navigationMenuTriggerStyle()">
        Documentation
    </NuxtLink>
  </NavigationMenuItem>
</template>

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[zernonia]

We need NavigationMenuLink here. We can set this to as="span" so it renders as inline element. And the upstream issue has been fixed unovue/radix-vue#1196

[nikolasdas]

Not sure if this is the best solution, but this is my current setup:

<NuxtLink v-slot="{ isActive, href, navigate }" to="..." custom>
  <NavigationMenuLink :active="isActive" :href :class="navigationMenuTriggerStyle()" @click="navigate">
    ...
  </NavigationMenuLink>
</NuxtLink>

[nikolasdas]

The other option I found is a bit cleaner:

<NavigationMenuLink as-child>
  <NuxtLink to="..." :class="navigationMenuTriggerStyle()">
    ...
  </NuxtLink>
</NavigationMenuLink>

but then you need to add [&.router-link-active]:bg-accent/50 to the navigationMenuTriggerStyle