Limit the number of toast displayed

Notifications are useful to get the attention of the user. But displaying too many of them can also be counterproductive. The container props expose a limit prop to meet your needs.

What happens to the notifications that are not displayed ? 🧐

Because they are added to a queue. They will be displayed as soon as a slot is free.

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

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

Open Sandbox

TIP

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

updateGlobalOptions({
  limit: 2,
});

updateGlobalOptions({
  limit: 2,
});

then use it per toast

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

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

Limit the number of toast displayed ​

Limit the number of toast displayed