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/

[ged3v]

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

[emsyzz]

Issue is due to fact that toast messages are rendered in completely separate Vue application that does not share context with your application - no global components, no globalProperties, no nothing. All plugins, directives, components and other stuff, must be be imported and configured again.

vue3-toastify/src/store/toastContainers.ts

Line 121 in 54773b9

const app = createApp(ToastifyContainer, options as Data);

I was hopeful that placing toast container (element with ID same as options.containerId) within DOM of main Vue application would somehow let Toastify to hook into it but tough luck - it doesn't.

Some similar plugins (modals and such) provide container component to insert somewhere in main application's layout and then renders their stuff inside it, which allows accessing main application context from within component that is provided to plugin and it works out really nicely.

[jerrywu001]

from 0.2.6

import router from './routes';

import Vue3Toasity, { type ToastContainerOptions } from 'vue3-toastify';

import Root from './App.vue';

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

function resolveGLobalComponents(instance: App<Element>) {
  instance.use(Antd);
}

const app = createApp(Root);

app.use(router);

resolveGLobalComponents(app);

app.use(
  Vue3Toasity,
  {
    // the Toast application is separate from the main application, so we need to call .use
    useHandler: resolveGLobalComponents,
    // other props...
  } as ToastContainerOptions,
);

app.mount('#app');