Render more than string

You can render any valid ReactNode: string, number, component... This is really straightforward.

Basic example

TIP

When you render a component, a closeToast prop and the toastProps are injected into your component.

import type { ToastOptions } from 'vue3-toastify';

import type { PropType } from 'vue';

export default {

name: 'Msg',

props: {

closeToast: Function as PropType<(e?: MouseEvent) => void>,

toastProps: Object as PropType<ToastOptions>,

};

</script>

<div>

<p>I am a vue component</p>

<p>Position: {{ toastProps?.position }}</p>

<button

@click="($event) => { closeToast && closeToast($event) }"

Click me to close toast

</button>

</div>

</template>

TIP

You can also write with a tsx component. that is cool!!

import { toast } from 'vue3-toastify';

import { defineComponent } from 'vue';

import Msg from './Msg';

const JsxDemo = defineComponent({

setup() {

const displayMsg = () => {

toast(<Msg uid="test custom props" />, {

closeOnClick: false,

autoClose: 8000,

position: toast.POSITION.BOTTOM_CENTER,

onOpen: (props) => {

console.log(props);

onClose: (props) => {

console.log(props);

});

// or

// toast(Msg, {

// closeOnClick: false,

// autoClose: 8000,

// position: toast.POSITION.BOTTOM_CENTER,

// data: {

// uid: 'custom from data',

// },

// onOpen: (props) => {

// console.log(props);

// },

// onClose: (props) => {

// console.log(props);

// },

// });

// cool !!!

toast(({ closeToast, toastProps }) => (

Example with pinia

In this example we will use pinia to share state accross a component and a toast. Increment and display a toast at the same time to see how the state stay in sync !

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const msg = ref<string>('world');
</script>

Render more than string ​

Basic example ​

Example with pinia ​

Render more than string

Basic example

Example with pinia