Appearance

useSnackbar Composable ​

File Information ​

  • Path: app/composables/core/miscellaneous/useSnackbar.ts
  • Purpose: Snackbar notification utility with queue management
  • Type: Core Miscellaneous Composable

Overview ​

The useSnackbar composable provides a simple interface for displaying snackbar notifications throughout the application. It delegates to the global snackbar plugin for actual rendering.

Features ​

  • Success Messages: Display success notifications
  • Error Messages: Display error notifications
  • Warning Messages: Display warning notifications
  • Info Messages: Display info notifications
  • Custom Options: Duration, position, closable options
  • Plugin Integration: Delegates to global $snackbar plugin

Return Type ​

typescript
{
  snackbars: Readonly<Ref<Snackbar[]>>  // Readonly snackbars array (deprecated)
  addSnackbar: (options: SnackbarOptions) => string
  removeSnackbar: (id: string) => void
  clearAllSnackbars: () => void
  showSuccess: (message: string, options?: Partial<SnackbarOptions>) => string
  showError: (message: string, options?: Partial<SnackbarOptions>) => string
  showWarning: (message: string, options?: Partial<SnackbarOptions>) => string
  showInfo: (message: string, options?: Partial<SnackbarOptions>) => string
}

Methods ​

showSuccess(message, options?) ​

Displays a success snackbar notification.

typescript
const snackbar = useSnackbar()
snackbar.showSuccess('Operation completed successfully')
snackbar.showSuccess('Saved!', { duration: 3000 })

showError(message, options?) ​

Displays an error snackbar notification.

typescript
const snackbar = useSnackbar()
snackbar.showError('Operation failed')
snackbar.showError(error.message, { duration: 5000 })

showWarning(message, options?) ​

Displays a warning snackbar notification.

typescript
const snackbar = useSnackbar()
snackbar.showWarning('Please check your input')

showInfo(message, options?) ​

Displays an info snackbar notification.

typescript
const snackbar = useSnackbar()
snackbar.showInfo('New features available')

addSnackbar(options) ​

Adds a snackbar with custom options.

typescript
snackbar.addSnackbar({
  message: 'Custom notification',
  type: 'success',
  duration: 5000,
  position: 'top right',
  closable: true
})

SnackbarOptions ​

typescript
{
  message: string           // Notification message
  type?: 'success' | 'error' | 'warning' | 'info'  // Notification type
  duration?: number         // Duration in milliseconds (default: 5000)
  position?: string         // Position (default: 'top right')
  closable?: boolean        // Show close button (default: true)
}

Usage Example ​

typescript
import { useSnackbar } from '~/composables/core/miscellaneous/useSnackbar'

const snackbar = useSnackbar()

// Success notification
const handleSuccess = async () => {
  try {
    await performAction()
    snackbar.showSuccess('Action completed successfully')
  } catch (error) {
    snackbar.showError(error.message || 'Action failed')
  }
}

// With custom options
snackbar.showInfo('Processing...', { 
  duration: 3000,
  closable: false 
})

Implementation Details ​

  • Plugin Delegation: The composable delegates to the global $snackbar plugin
  • Backward Compatibility: Maintains old interface for compatibility
  • Type Safety: Uses TypeScript types from ~/types