How to set 'active' state on NavigationMenuLink when using client side routing

[benkroeger]

The documentation recommends to wrap RouterLink inside NavigationMenuLink like so:

<NavigationMenuLink as-child>
  <RouterLink to="/">
    Home
  </RouterLink>
</NavigationMenuLink>

but that doesn't allow to read the isActive slot prop from RouterLink and pass it to the NavigationMenuLink in order to get the aria-current and data-active attributes set correctly.

normally, RouterLink would set the aria-current correctly - but due to attribute inheritance from NavigationMenuLink's Primitive, this gets overwritten with undefined

I am currently using something along the lines of

<RouterLink v-slot="{ isActive, isExactActive, href, navigate }" to="/" custom>
  <NavigationMenuLink :href :active="isExactActive" :class="[navigationMenuTriggerStyle(), isActive ? 'bg-accent text-accent-foreground border' : '']" @click="navigate">
    Home
  </NavigationMenuLink>
</RouterLink>

since this takes away the possibility to work with RouterLink's active-class attribute - and is overall a lot more verbose - I was wondering if there might be a better way.