Toast

A ToastQueue holds the toasts: push(data) queues one and close(id) dismisses it. BsToaster renders the queue in a fixed corner, with its toast slot once per entry. A toast announces its text when it shows, and hides itself after five seconds unless the pointer or focus is on the toasts.

Basic usage

Source

<script setup lang="ts">const toasts = new ToastQueue<{ message: string }>();   // one per app: toast from anywhere</script><button type="button" class="btn btn-primary" @click="toasts.push({ message: 'Saved!' })">Show toast</button><BsToaster :queue="toasts">  <template #toast="{ toast }">    <BsToast :visible="toast.visible" @update:visible="toasts.close(toast.id)">      <BsToastHeader><strong class="me-auto">Notification</strong></BsToastHeader>      <BsToastBody>{{ toast.data.message }}</BsToastBody>    </BsToast>  </template></BsToaster>