shadcn-vue
shadcn-vue copied to clipboard
docs: Navigation Menu Nuxt Link Example fixed
โ Type of change
- [x] ๐ 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.
- [x] I have updated the documentation accordingly.