Extending RouterLink example does not compile in TypeScript

[TheDutchCoder]

Version

4.0.15

Reproduction link

stackblitz.com

Steps to reproduce

There's an issue with reactivity in the template when extending the routerlink as per example from the docs: https://router.vuejs.org/guide/advanced/extending-router-link.html

The culprit is the ...RouterLink.props prop spread, which (for some reason) makes props unavailable to the template unless you destructure the props with toRefs.

I'm not sure if this a bug in vue-router, a bug in vue, or a limitation/side-effect in general, but the example won't properly build and will throw TS errors (it also throws errors in dev, as you can see in the reproduction).

Uncomment the commented out line with toRefs to make it all work.

What is expected?

Props to be available in the template with having to destructure them and use toRefs

What is actually happening?

Due to ...RouterLink.props the props are no longer directly available in the template.

---

Again: not sure if it's a bug, or a limitation of sorts.
At least it would be good to add this to the docs if it isn't a bug.

[posva]

This is a current limitation but I think it could be improved

[svifty7]

@TheDutchCoder To avoid loss of reactivity, I specify the "to" object in the props

export default defineComponent({
    props: {
        to: {
            type: Object as PropType<RouteLocationPathRaw>,
            required: true
        },
    },
    setup(props) {
        const {
            isActive, href, navigate
        } = useLink(props);

        return {
            href,
            navigate
        };
    }
});

[yoyoys]

is this fixable at feature version?

[ImDarkTom]

Still an issue as of writing this.

@svifty7 's solution partially worked but I still had to add more to it to get it into a compilable state. For anyone that needs it here are the modifications I needed to make in order to get it to build (based off the sample provided in the docs):

<script setup lang="ts">
import { computed, type PropType } from 'vue'
import { RouterLink, type RouteLocationPathRaw } from 'vue-router'

defineOptions({
  inheritAttrs: false,
})

defineSlots<{
  default: void,
  isActive: Boolean,
}>()

const props = defineProps({
  // @ts-ignore
  ...RouterLink.props,
  to: {
    type: Object as PropType<RouteLocationPathRaw>,
    required: true
  },
  activeClass: String,
  inactiveClass: String,
})

const isExternalLink = computed(() => {
  return typeof props.to === 'string' && props.to.startsWith('http')
})
</script>

<template>
  <a v-if="isExternalLink" v-bind="$attrs" :href="props.to" target="_blank">
    <slot></slot>
  </a>
  <router-link
    v-else
    to=""
    v-bind="$props"
    custom
    v-slot="{ isActive, href, navigate }"
  >
    <a
      v-bind="$attrs"
      :href="href"
      @click="navigate"
      :class="isActive ? props.activeClass : props.inactiveClass"
    >
      <slot></slot>
    </a>
  </router-link>
</template>