Skip to content

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>

TIP

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

ts
updateGlobalOptions({
  limit: 2,
});

then use it per toast

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

Released under the MIT License.