Globally provide custom component

[mrleblanc101]

In Render more than string, I see I can provide a custom component, the annoying part is that I need to pass the component every time I call toast(), is there a way to define it globally ?

I want to style my Toast using tailwindcss classes, so I need to provide a custom component to do this.
This would be especially usefull in a Nuxt context:

import Vue3Toastify, { toast, type ToastContainerOptions } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(Vue3Toastify, {
        component: MyCustomComponent, // <-- Something like this
        autoClose: 8000,
        dangerouslyHTMLString: true,
        theme: 'auto',
        transition: toast.TRANSITIONS.BOUNCE,
        position: toast.POSITION.TOP_RIGHT,
    } as ToastContainerOptions);

    return {
        provide: { toast },
    };
});

[mrleblanc101]

I guess I could provide a custom toast() function, but not sure if it's the right approach:

    return {
        provide: { toast: (...args) => toast(MyCustomComponent, { ...args }) },
    };

[jerrywu001]

you can use custom component instead, like:

• Custom.vue

<template>
  <div>
    <el-button type="primary" class="bg-[#f60] text-white">
      Primary {{ name }}
    </el-button>
  </div>
</template>

<script setup lang="ts">
defineProps({
  name: {
    type: String,
    default: 'test',
  },
});
</script>

• invoke

toast.loading(Custom, {
    contentProps: { name: 'sended' },
    expandCustomProps: true,
  });

[mrleblanc101]

@jerrywu001 i don't think you understood me properly. I want to set to component globally in the plugin option instead of passing it to the toast function for every involution.

[mrleblanc101]

I guess I'll just do a custom composable that wrap the toast function as state here #66 (comment)

[jerrywu001]

got it