Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Navigation Menu Nuxt Link Example fixed #702

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from

Conversation

michaelsieminski
Copy link

@michaelsieminski michaelsieminski commented Aug 7, 2024

❓ 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.

@@ -56,10 +56,8 @@ import { navigationMenuTriggerStyle } from '@/components/ui/navigation-menu'
```vue
<template>
<NavigationMenuItem>
<NuxtLink to="/docs">
<NavigationMenuLink :class="navigationMenuTriggerStyle()">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link

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
Copy link

nikolasdas commented Sep 10, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants