Appearance

Snackbar Plugin ​

File Information ​

  • Path: app/plugins/snackbar.client.ts
  • Purpose: Global snackbar notification system
  • Type: Client-only (runs only in browser)
  • Load Order: 7

Overview ​

The Snackbar plugin provides a global notification system for displaying success, error, warning, and info messages to users. It creates custom snackbar elements with icons, animations, and auto-dismiss functionality.

Key Features ​

  1. Multiple Notification Types

    • Success notifications
    • Error notifications
    • Warning notifications
    • Info notifications

  2. Custom Styling

    • Color-coded by type
    • Custom icons for each type
    • Smooth animations
    • Auto-dismiss with timeout

  3. Flexible API

    • Simple methods for each type
    • Custom messages and timeouts
    • Manual close functionality

Code Structure ​

typescript
export default defineNuxtPlugin((nuxtApp) => {
  const snackbar: SnackbarMethods = {
    show(message, icon, color, timeout),
    success(message, timeout),
    error(message, timeout),
    warning(message, timeout),
    info(message, timeout),
    hideSnackbar(element),
    getBackgroundColor(color),
    createIconSvg(icon, color)
  }

  return {
    provide: {
      snackbar
    }
  }
})

Methods ​

show(message, icon?, color?, timeout?) ​

Display a snackbar notification.

Parameters:

  • message: string - Notification message
  • icon?: Component | null - Optional icon component
  • color?: SnackbarColor - Notification color ('success' | 'error' | 'warning' | 'info')
  • timeout?: number - Auto-dismiss timeout in milliseconds (default: 3000)

Returns: void

success(message, timeout?) ​

Display success notification.

Parameters:

  • message: string - Success message
  • timeout?: number - Auto-dismiss timeout (default: 3000)

Returns: void

error(message, timeout?) ​

Display error notification.

Parameters:

  • message: string - Error message
  • timeout?: number - Auto-dismiss timeout (default: 3000)

Returns: void

warning(message, timeout?) ​

Display warning notification.

Parameters:

  • message: string - Warning message
  • timeout?: number - Auto-dismiss timeout (default: 3000)

Returns: void

info(message, timeout?) ​

Display info notification.

Parameters:

  • message: string - Info message
  • timeout?: number - Auto-dismiss timeout (default: 3000)

Returns: void

Usage Examples ​

Success Notification ​

typescript
const { $snackbar } = useNuxtApp()

$snackbar.success('Operation completed successfully!')

Error Notification ​

typescript
const { $snackbar } = useNuxtApp()

$snackbar.error('An error occurred. Please try again.')

Warning Notification ​

typescript
const { $snackbar } = useNuxtApp()

$snackbar.warning('Please review your input.')

Info Notification ​

typescript
const { $snackbar } = useNuxtApp()

$snackbar.info('New features available!')

Custom Notification ​

typescript
const { $snackbar } = useNuxtApp()

$snackbar.show('Custom message', CustomIcon, 'success', 5000)

Using Composable ​

typescript
const snackbar = useSnackbar()

snackbar.success('Success!')
snackbar.error('Error!')

Notification Colors ​

Success ​

  • Border Color: Green (#4CAF50)
  • Background: Light green (#E6F4EA)
  • Icon: Checkmark circle

Error ​

  • Border Color: Red (#F44336)
  • Background: Light red (#FCE8E6)
  • Icon: Alert circle

Warning ​

  • Border Color: Orange (#FF9800)
  • Background: Light yellow (#FFF3CD)
  • Icon: Warning triangle

Info ​

  • Border Color: Blue (#2196F3)
  • Background: Light blue (#D1ECF1)
  • Icon: Info circle

Styling ​

Snackbars are styled with:

  • Fixed position (top-right)
  • Maximum width: 600px
  • Border radius: 8px
  • Box shadow for depth
  • Smooth slide-in animation
  • Auto-dismiss after timeout

Animation ​

Slide In ​

  • Starts off-screen (translateX(100%))
  • Animates to position (translateX(0))
  • Opacity fade-in

Slide Out ​

  • Animates off-screen (translateX(100%))
  • Opacity fade-out
  • Removed from DOM after animation

Auto-Dismiss ​

  • Default timeout: 3000ms (3 seconds)
  • Configurable per notification
  • Set timeout to 0 to disable auto-dismiss
  • Manual close button always available

Close Button ​

  • X icon in top-right corner
  • Click to dismiss immediately
  • Same color as notification border

Dependencies ​

  • Vue - Component rendering
  • Snackbar Icon Components - Success, Error, Warning, Info icons

Notes for Development ​

  • Client-only plugin (.client.ts suffix)
  • Creates DOM elements directly (not Vue components)
  • Multiple snackbars can be displayed simultaneously
  • Auto-dismiss prevents notification spam
  • Icons generated as SVG strings