A totally over-engineered way to make a """type-safe""" `AppLink` with vue-router

README.md

I was reading this and trying to implement it in Typescript.

There isn't a lot of good advice on the official doc except for using @ts-ignore which I hate using.

So I spent like half an hour to hack this solution. I hope you enjoy.

---

And you are welcome.

AppLink.vue

<script lang="ts">
import { computed, PropType, defineComponent } from 'vue';
import { RouterLink, useLink } from 'vue-router';
import type { RouterLinkProps } from 'vue-router';

declare module 'vue-router' {
  interface _RouterLinkI {
    props: {
      [k in keyof RouterLinkProps]-?: {
        type: PropType<RouterLinkProps[k]>;
        required: undefined extends RouterLinkProps[k] ? false : true;
      };
    };
  }
}

export default defineComponent({
  props: {
    ...RouterLink.props,
  },
  setup(props) {
    const { href, ...link } = useLink(props);
    const isExternal = computed(
      () => typeof props.to === 'string' && /^https?:\/\//.test(props.to),
    );
    return {
      ...link,
      isExternal,
      href: computed(() => {
        if (isExternal.value) return props.to;
        return href.value;
      }),
    };
  },
});
</script>

<template>
  <a v-if="isExternal" :href="href" target="_blank" class="external">
    <slot></slot>
  </a>
  <a
    v-else
    :href="href"
    :class="{
      [activeClass ?? 'active']: isActive,
      [exactActiveClass ?? 'exect-active']: isExactActive,
    }"
    @click="navigate"
  >
    <slot></slot>
  </a>
</template>