Handling autoClose

The autoClose prop accept a duration in milliseconds or false.

Change the default delay

INFO

close toast after 8 seconds

import App from './App.vue';

import { createApp } from 'vue';

import Vue3Toasity, { toast } from 'vue3-toastify';

import 'vue3-toastify/dist/index.css';

createApp(App).use(

Vue3Toasity,

{

autoClose: 8000,

position: toast.POSITION.BOTTOM_CENTER,

// ...

}, // global options type definition --> ToastContainerOptions

).mount('#app');

Change the delay per toast for more control

WARNING

It will overrides the global options

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

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

Prevent the toast from closing by default

import App from './App.vue';
import { createApp } from 'vue';
import Vue3Toasity, { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

createApp(App).use(
  Vue3Toasity,
  {
    autoClose: false,
    position: toast.POSITION.BOTTOM_CENTER,
  }, // global options type definition --> ToastContainerOptions
).mount('#app');

Prevent the toast from closing per toast

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

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

Handling autoClose ​

Change the default delay ​

Change the delay per toast for more control ​

Prevent the toast from closing by default ​

Prevent the toast from closing per toast ​

Handling autoClose

Change the default delay

Change the delay per toast for more control

Prevent the toast from closing by default

Prevent the toast from closing per toast