Define callback

You can define two callbacks. Their names are self-explanatory:

onOpen
onClose

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

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

Open Sandbox

pass props to callback

Msg.vue

vue

<script lang="ts">
import { ToastOptions } from 'vue3-toastify';
import { PropType } from 'vue';

export default {
  name: 'Msg',
  props: {
    closeToast: Function as PropType<(e?: MouseEvent) => void>,
    toastProps: Object as PropType<ToastOptions>,
  },
};
</script>

<template>
  <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>

<script lang="ts">
import { ToastOptions } from 'vue3-toastify';
import { PropType } from 'vue';

export default {
  name: 'Msg',
  props: {
    closeToast: Function as PropType<(e?: MouseEvent) => void>,
    toastProps: Object as PropType<ToastOptions>,
  },
};
</script>

<template>
  <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>

usage in single vue file

vue

<script lang="ts" setup>
import Msg from './Msg.vue';

const show = () => {
  toast(
    ({ closeToast, toastProps }) => h(Msg, { closeToast, toastProps }),
    {
      data: { uid: 'sdsd' },
      onOpen: ({ uid }) => console.log(uid),
    },
  );
};
</script>

<script lang="ts" setup>
import Msg from './Msg.vue';

const show = () => {
  toast(
    ({ closeToast, toastProps }) => h(Msg, { closeToast, toastProps }),
    {
      data: { uid: 'sdsd' },
      onOpen: ({ uid }) => console.log(uid),
    },
  );
};
</script>

usage in jsx

jsx

import { toast } from 'vue3-toastify';
import { defineComponent } from 'vue';
import Msg from './Msg.vue';

const JsxDemo = defineComponent({
  setup() {
    const displayMsg = () => {
      toast(<Msg uid="test custom props" />, {
        closeOnClick: false,
        autoClose: 8000,
        onOpen: (props) => {
          console.log(props);
        },
        onClose: (props) => {
          console.log(props);
        },
      });

      // or

      // toast(Msg, {
      //   closeOnClick: false,
      //   autoClose: 8000,
      //   data: {
      //     uid: 'custom from data',
      //   },
      //   onOpen: (props) => {
      //     console.log(props);
      //   },
      //   onClose: (props) => {
      //     console.log(props);
      //   },
      // });
    };

    return () => (
      <div>
        <button onClick={displayMsg}>toast in .jsx</button>
      </div>
    );
  },
});

export default JsxDemo;

import { toast } from 'vue3-toastify';
import { defineComponent } from 'vue';
import Msg from './Msg.vue';

const JsxDemo = defineComponent({
  setup() {
    const displayMsg = () => {
      toast(<Msg uid="test custom props" />, {
        closeOnClick: false,
        autoClose: 8000,
        onOpen: (props) => {
          console.log(props);
        },
        onClose: (props) => {
          console.log(props);
        },
      });

      // or

      // toast(Msg, {
      //   closeOnClick: false,
      //   autoClose: 8000,
      //   data: {
      //     uid: 'custom from data',
      //   },
      //   onOpen: (props) => {
      //     console.log(props);
      //   },
      //   onClose: (props) => {
      //     console.log(props);
      //   },
      // });
    };

    return () => (
      <div>
        <button onClick={displayMsg}>toast in .jsx</button>
      </div>
    );
  },
});

export default JsxDemo;

Define callback ​

pass props to callback ​

Define callback

pass props to callback