Skip to content

Container Props

Props

PropsTypeDefault ValueDescription
multiplebooleantruedisplay multiple at the same time
limitnumber-limit the number of toast displayed at the same time
newestOnTopbooleanfalseDisplay newest toast on top
containerClassNamestring-Add optional classes to the container
dangerouslyHTMLStringbooleanfalserender unsafe string, like html tag
clearOnUrlChangebooleantrueclear all toasts on url change
iconIconType-Used to display a custom icon. Set it to false to prevent
rtlbooleanfalseSupport right to left content
containerIdIdtoast.POSITION.TOP_RIGHTUsed to identify the Container when working with multiple container. Also used to set the id attribute
positionToastPositiontoast.POSITION.TOP_RIGHTOne of top-right, top-center, top-left, bottom-right, bottom-center, bottom-left
autoClosenumber | boolean5000Delay in ms to close the toast. If set to false, the notification needs to be closed manually
closeButtonVNode | booleandefault close iconReplace the default close button or false to hide the button
transitionToastTransition | CSSTransitionPropstoast.TRANSITIONS.BounceA reference to a valid transition animation
hideProgressBarbooleanfalseDisplay or not the progress bar below the toast(remaining time)
pauseOnHoverbooleantrueKeep the timer running or not on hover
pauseOnFocusLossbooleantruePause the timer when the window loses focus
closeOnClickbooleantrueDismiss toast on click
toastClassNamestring-Add optional classes to the toast
bodyClassNamestring-Add optional classes to the toast body
styleCSSProperties-Add optional inline style to the container
progressClassNamestring-Add optional classes to the progress bar
progressStyleCSSProperties-Add optional inline style to the progress bar
rolestringalertDefine the ARIA role for the toasts
themeToastThemeautoOne of auto, light, dark, colored, auto means automatically detects system theme colors

TIP

By default, all toasts will inherit container props. Props defined on toast supersede container props. The demo is not exhaustive, check the doc for more!

Define the Container Props

ts
import { createApp } from 'vue';
import Vue3Toastify, { type ToastContainerOptions } from 'vue3-toastify';
import App from './App.vue';

const app = createApp(App);

app.use(
  Vue3Toastify,
  {
    autoClose: 2000,
    style: {
      opacity: '1',
      userSelect: 'initial',
    },
  } as ToastContainerOptions,
);

app.mount('#app');

TIP

You can also use updateGlobalOptions hook to defined the container props.

ts
updateGlobalOptions({
  autoClose: 2000,
  style: {
    opacity: '1',
    userSelect: 'initial',
  },
});

then use it per toast

ts
toast.success('Wow so easy!');

Released under the MIT License.