NuxtLink in PopoverPanel does not close Popover (Nuxt 3)

[nklsw]

Reproduction: Stackblitz example

I got a popover as menu in a Nuxt 3 application with some NuxtLinks as menu items. When the NuxtLink gets clicked, the correct page gets renderd, but the popover stays open. When I use a normal <a> instead of <NuxtLink> it's working like expected and the popover closes on click of the menu item. Is this a bug? Or is there a legit reason why this behavior is not working with NuxtLink? A Nuxt (3) problem?

[xieyuheng]

the same reason as this:
https://headlessui.com/react/menu#integrating-with-next-js

[xieyuheng]

I define my own <Link> in components/Link.vue:

<script setup lang="ts">
// We can not use <NuxtLink> with headlessui:
// - https://headlessui.com/react/menu#integrating-with-next-js

defineProps<{ href?: string; target?: string }>()

const router = useRouter()
</script>

<template>
  <a @click="href && router.push({ path: href })" :target="target">
    <slot />
  </a>
</template>

[adriaandotcom]

Seems to work fine indeed: https://stackblitz.com/edit/github-as55bc-whonwl?file=app.vue

[MojoExMachina]

Even simpler, also from the docs:

Alternatively, Popover and PopoverPanel expose a close() slot prop which you can use to imperatively close the panel, say after running an async action[.]

So you can do:

<PopoverPanel v-slot="{ close }">
  <div>
    <NuxtLink :to="/" @click="close">
      Home
    </NuxtLink>
  </div>
</PopoverPanel>

[anthonypillot]

Thank you, it works perfectly.

[gokhantaskan]

NuxtLink does not emit a click event in my codebase ("nuxt": "^3.12.4"). I can't use it :/

[victor-michaux]

I had the same issue with the Dropdown component and I fix it like this:

<MenuItem v-slot="{ close }">
  <NuxtLink v-slot="{ href }" custom to="/some/url">
    <a :href="href" @click="close">
      {{ item.name }}
     </a>
  </NuxtLink>
<MenuItem />