FreeComponent · Toasts & alerts
Toast Stack
Vue 3 toast notification stack with push/dismiss API, success, error, info and warning variants, pause-on-hover timers and six positions. Tailwind CSS.
by Vueplay
Vue toast and notification components
Toasts and alerts tell people what just happened: a save succeeded, a request failed, something needs attention. These Vue 3 feedback components include inline alerts, banners and stacked toast notifications, styled with Tailwind CSS 4.
They are written with <script setup lang="ts">, support class-based dark mode and have no dependencies besides vue. Install one with npm or copy it and adapt the variants to your design.
FreeGood to know
Building toasts & alerts that hold up
- Announce messages to screen readers
- Render toasts inside a region with role="status" (or aria-live="polite") that exists before any message is added. Use role="alert" only for urgent errors.
- Do not auto-dismiss important messages
- Auto-dismiss is fine for confirmations, but errors and anything with an action should stay until closed. Pause the timer while the toast is hovered or focused.
- Use a small composable for toasts
- A shared reactive array plus a useToast() composable that pushes and removes items is usually enough. Mount the toast container once near the root of the app.
- Do not rely on color alone
- Pair each variant color with an icon and a text label like "Error" so the meaning survives color blindness and dark mode changes.
FAQ
Questions
How do I trigger a toast from anywhere in my app?
Mount the toast container once, keep the messages in a shared reactive store or composable, and push new messages from any component or API handler.
What is the difference between a toast and an alert?
A toast is a temporary message about something that just happened, while an alert stays inline next to the content it describes until the problem is fixed or dismissed.