vuejs3

If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement Vue3 composite api

[Vue warn]: Failed to resolve component: component If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

enter image description here

my component NavbarLink

<script setup>
import { defineProps } from "vue";

const props = defineProps({
    hrefLink: { type: String, required: true, default: "#" },
});
</script>

<template>
    <component>
        <a class="hover:text-gray-400" :href="hrefLink"><slot /></a>
    </component>
</template>
Solution

  • To fix the error, replace the <component> tag with the actual component name. To use HTML tags without needing to include other Vue components, use the <div> tag or other HTML tags. Here's an example of improving your code by using the tag:

    <script setup>
import { defineProps } from "vue";

const props = defineProps({
    hrefLink: { type: String, required: true, default: "#" },
});
</script>

<template>
    <div>
        <a class="hover:text-gray-400" :href="hrefLink"><slot /></a>
    </div>
</template>