Positioning toast

By default, all the toasts will be positioned on the top right of your browser. If a position is set on a toast, the one defined on ToastContainer will be replaced.

The following values are allowed: top-right, top-center, top-left, bottom-right, bottom-center, bottom-left

For convenience, toast exposes a POSITION property to avoid any typos.

example

TIP

View it with a PC, the effect is even better

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

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

Open Sandbox