Using Toast vs Snackbar

This guide shows you how to use the useToast and useSnackbar composables in your Vue 3 projects.

Overview

Both Toast and Snackbar provide notification systems, but they serve different purposes:

Feature	Toast	Snackbar
Multiple notifications	✅ Yes - can show multiple at once	❌ No - shows one at a time
Position	6 positions (top-left, top, top-right, bottom-left, bottom, bottom-right)	6 positions (same as Toast, default: bottom center)
Use case	Multiple notifications, system alerts	Brief messages, undo actions
Auto-dismiss	Configurable timeout	Configurable timeout

Setup

First, you need to add the Toast and Snackbar components to your app root (App.vue or Provider.vue). Import OToast and OSnackbar components and add them to your template.

Using Toast

Basic Usage

Import useToast from the composable and call methods like success(), error(), warning(), and info() to show different types of notifications.

Advanced Options

Use showToast() for custom notifications with full control over options like position, timeout, and messages. You can also configure global settings using methods like setPosition(), setDefaultTimeout(), and setMaxNotifications().

Toast Methods

Method	Description
`toast.success(message, options?)`	Show success notification
`toast.error(message, options?)`	Show error notification (persistent by default)
`toast.warning(message, options?)`	Show warning notification
`toast.info(message, options?)`	Show info notification
`toast.showToast(options)`	Show custom notification with full options
`toast.removeNotification(notification)`	Remove specific notification
`toast.clearAll()`	Remove all notifications
`toast.setPosition(position)`	Set default position
`toast.setOffset(x, y)`	Set default offset in rem units
`toast.setDefaultTimeout(timeout)`	Set default auto-dismiss timeout
`toast.setMaxNotifications(max)`	Set maximum number of notifications

Using Snackbar

Basic Usage

Import useSnackbar from the composable and use methods like success(), error(), warning(), and info() to show snackbar notifications.

Snackbar with Action Button

Use showSnackbar() with buttonConfig option to add action buttons like "Undo" for user interactions.

Snackbar Methods

Method	Description
`snackbar.success(message, options?)`	Show success snackbar
`snackbar.error(message, options?)`	Show error snackbar
`snackbar.warning(message, options?)`	Show warning snackbar
`snackbar.info(message, options?)`	Show info snackbar
`snackbar.showSnackbar(options)`	Show custom snackbar
`snackbar.removeNotification()`	Remove current notification
`snackbar.clearAll()`	Clear notification
`snackbar.setPosition(position)`	Set default position
`snackbar.setDefaultTimeout(timeout)`	Set default auto-dismiss timeout