Using vuetify components inside a custom component "Failed to resolve component"

[Behave81]

In my project I have installed and configured vuetify correct and it is working everywhere. But when I use some vuetity components inside a Toast component I get the error "Failed to resolve component: v-card"

component:

<template>
    <div>
        <v-card title="title"> </v-card>
    </div>
</template>

<script setup lang="ts">
    import { PropType } from "vue";
    import type { ToastOptions } from "vue3-toastify";
    defineProps({
        closeToast: {
            type: Function as PropType<(e?: MouseEvent) => void>,
            required: true,
        },
        toastProps: {
            type: Object as PropType<ToastOptions>,
            required: true,
        },
    });
</script>

<style scoped></style>

call of the custom compnent:

import ToastComponent from "./ToastComponent.vue";

export function failure(message: string, error: any) {
    toast(ToastComponent, {
        closeOnClick: false,
        position: toast.POSITION.BOTTOM_CENTER,
        data: error,
        type: toast.TYPE.ERROR,
        autoClose: false,
    });
}

How can I use vuetify components inside a custom toast component?

[jerrywu001]

@Behave81 can you provide me an online demo with https://stackblitz.com/

[the-SecEng]

You can directly use it in axios (or however you make your http requests) instead of using as a different component, which will give the same result regardless of whatever tool you use in the template and it is way faster and easier doing in that way.

[jerrywu001]

@Behave81 @goktugerol-dev

The reason why we can't parse the v-card is h function in vue3 can't resolve a global component, like register by vuetify:

import { createApp } from 'vue';
import App from './App.vue';

import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components;
import * as directives from 'vuetify/directives';

const vuetify = createVuetify({
  components,
  directives,
});

const app = createApp(App);
app.use(vuetify).mount('#app');

import { defineComponent, h } from 'vue';

const Child = defineComponent({
  name: 'Child',
  setup() {
    return () => h('v-card', [h('span', 'hello')]);
  },
});

export default Child;

result:

[jerrywu001]

you must import what you use

[yulei199719]

focus