How to dynamically render <router-link> or <a> in Vue depending on whether the link is exrternal or internal?

Issue

<template>
  <component
    :is="type === 'internal' ? 'router-link' : 'a'"
    :to="type === 'internal' ? link : null"
    :href="type !== 'internal' ? link : null"
  >
    <slot />
  </component>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class SiteLink extends Vue {
  @Prop({
    validator: (value: string) =>
      ["external", "internal"].includes(value)
  })
  private readonly type!: string;

  @Prop({ type: String })
  private readonly link!: string;
}
</script>

Above is a Vue component where it will render a link. I have stripped out anything not relevant to the problem (I.e. rel, target, class, etc.).

Understanding - My understanding of Vue Router is that <router-link to="/about">About</router-link> and <a href="/about">About</a> will both render as<a href="/about">About</a> in the DOM, with a difference being the <router-link> version will give the link the SPA functionality (I.e. doesn't load a new page, it dynamically renders a component).

Expected - When type="internal", it will render the <router-link> version. When type="external", it will render the <a> version.

<site-link type="external" link="https://stackoverflow.com">Stack Overflow</site-link>

Will render

<a href="https://stackoverflow.com">Stack Overflow</a>

<site-link type="internal" link="/about">About</site-link>

Will render

<router-link to="/about">About</router-link>

Which is then handle by VueRouter to render

<a href="/about">About</a>

Actual - When type="internal", a <a> with no href rendered in the DOM. When type="external", it renders as expected.

<site-link type="external" link="https://stackoverflow.com">Stack Overflow</site-link>

Will render

<a href="https://stackoverflow.com">Stack Overflow</a>

<site-link type="internal" link="/about">About</site-link>

Will render

<router-link to="/about">About</router-link>

Which is then handle by VueRouter to render

<a>About</a> <!-- Notice there is no href -->

Any ideas how I can achieve what I want?

Solution

The official documentation includes an example of how to do this now.

• Extending RouterLink

Their approach is to create a custom template that handles external links.

Answered By - aboy021