Component which selects <nuxt/vue-router> or <a href>, depending of the url you're passing to it, and projects dependencies.

Link.vue

<template>
    <component :is="props.component" v-bind="props.attributes">
        <slot/>
    </component>
</template>

<script>
import keysIn from 'lodash/keysIn';

export default {
    data() {
        return {
            availableComponents: keysIn(this.$options.components),
        };
    },
    props: {
        to: {
            type: String,
            required: true,
        },
    },
    computed: {
        isAbsolute() {
            return this.to.match(/^(http(s)?|ftp):\/\//);
        },
        props() {
            if (!this.isAbsolute && this.availableComponents.includes('nuxt-link')) {
                return {
                    component: 'nuxt-link',
                    attributes: {
                        to: this.to,
                    },
                };
            }

            if (!this.isAbsolute && this.availableComponents.includes('router-link')) {
                return {
                    component: 'router-link',
                    attributes: {
                        to: this.to,
                    },
                };
            }

            return {
                component: 'a',
                attributes: {
                    href: this.to,
                },
            };

        },
    },
};
</script>