shadcn-vue icon indicating copy to clipboard operation
shadcn-vue copied to clipboard

docs: Navigation Menu Nuxt Link Example fixed

Open michaelsieminski opened this issue 6 months ago โ€ข 2 comments

โ“ 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.

michaelsieminski avatar Aug 07 '24 13:08 michaelsieminski