Vue.js router-link issue

It seems like <router-link /> (vue-router-next) doesn’t work the same inside a <MenuItem /> as it does outside of it.

Here’s a little demo: https://codesandbox.io/s/headlessuivue-menu-example-forked-xiitu

When navigating between Home & About pages from the Menu, the page refreshes completely. When navigating with the top links it doesn’t, as it should be.

Any idea what’s happening?

[RobinMalfait]

I fixed a sort of related issue earlier (#249), so that we can get access to the underlying DOM node, even when using a custom component. You can already try it using npm install @headlessui/vue@dev or yarn add @headlessui/vue@dev.

But it seems like the router-link doesn’t forward all the props correctly (aka the onClick prop). The fix @ryzr provided can help you, however make sure to put the @click on the MenuItem (so that we can merge the clicks) instead of on the a tag.

Here is a codesandbox: https://codesandbox.io/s/headlessuivue-menu-example-forked-31t3b?file=/src/components/Menu.vue

[ryzr]

Hey, I was able to get around this by using router-link slots:

<router-link
  v-slot="{ isActive, href, navigate }"
  custom
  :to="...">
  <MenuItem>
    <a
      :href="href"
      @click="navigate" />
  </MenuItem>
</router-link>

It doesn’t seem to work if RouterLink is a child to MenuItem. This might be because RouterLink does not have emits: ['click']? I’m not fully across the Vue 3 event system, so I could be wrong here.