Vue Component Library

Appearance

Toast Component ​

A powerful and flexible toast notification system built with Vue 3 Composition API and a custom useToast composable.

Overview ​

The Toast component provides a complete notification system with:

  • Composable-based Architecture: Uses useToast composable for global state management
  • Multiple Notification Types: Built-in success, error, warning, and info types
  • Flexible Positioning: 6 positioning options with configurable offsets
  • Auto-dismiss & Persistence: Configurable timeouts with persistent notification support
  • Custom Icons & Content: Support for SVG icons, primary and secondary messages
  • Stack Management: Automatic stacking with max notification limits
  • Global Configuration: Runtime configuration of position, timeouts, and limits

When to Use ​

Use the Toast component when you need to display notifications for:

  • Success Feedback: Confirm successful operations and actions
  • Error Alerts: Display error messages and failure notifications
  • Warning Messages: Show important warnings and cautions
  • Information Updates: Provide status updates and informational messages
  • System Notifications: Display app-wide notifications and alerts

Key Features ​

🔧 Composable Architecture ​

Built with Vue 3 Composition API using the useToast composable for clean, reusable state management.

🎨 Multiple Types ​

Pre-styled notification types with custom icon support:

  • Success (green)
  • Error (red)
  • Warning (orange)
  • Info (blue)
  • Custom types with your own styling

📍 Flexible Positioning ​

Position toasts anywhere on screen:

  • Top: left, center, right
  • Bottom: left, center, right
  • Configurable X/Y offsets in rem units
  • Per-notification position and offset overrides
  • Notifications grouped by position in separate containers

⏱️ Smart Timing ​

  • Auto-dismiss with configurable timeouts
  • Persistent notifications that stay until closed
  • Default 5-second timeout with override options

📚 Stack Management ​

  • Multiple notifications display in a stack per position
  • Configurable maximum notification limits (defaults to 5 per position)
  • Automatic oldest-first removal when limit exceeded
  • Bottom positions use reverse order for proper visual stacking

🎛️ Runtime Configuration ​

  • Change position, offsets, and limits dynamically
  • Global configuration affects all new notifications
  • No component restarts required

Quick Start ​

1. Add the Component ​

vue
<template>
  <div id="app">
    <!-- Your app content -->
    
    <!-- Add toast component once -->
    <OToast />
  </div>
</template>

2. Use the Composable ​

vue
<script setup>
import { useToast } from '@/composables/useToastComposable'

const { success, error, warning, info } = useToast()

const handleClick = () => {
  success('Operation completed successfully!')
}
</script>

3. Configure as Needed ​

vue
<script setup>
import { useToast } from '@/composables/useToastComposable'

const { setPosition, setOffset, setMaxNotifications } = useToast()

// Configure the toast system
setPosition('top-right')
setOffset(2, 1) // 2rem from right, 1rem from top
setMaxNotifications(3) // Limit to 3 notifications per position
</script>

Architecture ​

The toast system consists of two main parts:

  1. OToast.vue - The display component that renders notifications grouped by position
  2. useToastComposable.js - The composable that manages global state and provides methods

This separation allows you to:

  • Place the component once in your app
  • Use the composable anywhere to trigger notifications
  • Maintain consistent state across your entire application

API Reference →

Interactive Demo →

View Source Code →