Replace the default transition

There are 4 built-in transitions provided.

Bounce
Slide
Zoom
Flip

Bounce is used by default, but you can replace it with your own transition, or with one from the list above.

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

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

Open Sandbox

change globally

app.use(
  Vue3Toasity,
  {
    transition: toast.TRANSITIONS.FLIP,
    // toast.TRANSITIONS.BOUNCE
    // toast.TRANSITIONS.ZOOM
    // toast.TRANSITIONS.SLIDE
  }, // as ToastContainerOptions
);

app.use(
  Vue3Toasity,
  {
    transition: toast.TRANSITIONS.FLIP,
    // toast.TRANSITIONS.BOUNCE
    // toast.TRANSITIONS.ZOOM
    // toast.TRANSITIONS.SLIDE
  }, // as ToastContainerOptions
);

Replace the default transition ​

Replace the default transition