Appearance

Snackbar Types ​

File Information ​

  • Path: app/types/snackbar.ts
  • Purpose: TypeScript interfaces and constants for snackbar notification system
  • Exported From: ~/types (via index.ts)

Overview ​

This file contains TypeScript interfaces for the snackbar notification system including color types, options, methods, and color constants. These types ensure type safety for snackbar usage throughout the application.

Type Definitions ​

Snackbar Color Type ​

SnackbarColor ​

Available snackbar color themes.

typescript
type SnackbarColor = 'success' | 'error' | 'warning' | 'info'

Values:

  • 'success' - Success notification (green)
  • 'error' - Error notification (red)
  • 'warning' - Warning notification (orange/yellow)
  • 'info' - Info notification (blue)

Usage:

typescript
import type { SnackbarColor } from '~/types'

const color: SnackbarColor = 'success'

Snackbar Options ​

SnackbarOptions ​

Configuration options for snackbar display.

typescript
interface SnackbarOptions {
  /** The message text to display */
  message: string
  /** Custom icon component (optional) */
  icon?: Component | null
  /** Color theme for the snackbar */
  color?: SnackbarColor
  /** Timeout duration in milliseconds */
  timeout?: number
}

Properties:

  • message: string - Notification message text
  • icon?: Component | null - Optional custom icon component
  • color?: SnackbarColor - Color theme (default: 'success')
  • timeout?: number - Auto-dismiss timeout in milliseconds (default: 3000)

Usage:

typescript
import type { SnackbarOptions } from '~/types'

const options: SnackbarOptions = {
  message: 'Operation completed successfully!',
  color: 'success',
  timeout: 5000
}

Snackbar Methods ​

SnackbarMethods ​

Methods available on the snackbar plugin.

typescript
interface SnackbarMethods {
  show(message: string, icon?: Component | null, color?: SnackbarColor, timeout?: number): void
  success(message: string, timeout?: number): void
  error(message: string, timeout?: number): void
  warning(message: string, timeout?: number): void
  info(message: string, timeout?: number): void
  hideSnackbar(snackbarEl: HTMLElement): void
  getBackgroundColor(color: SnackbarColor): string
  createIconSvg(icon: Component, color: string): string
}

Methods:

  • show() - Show custom snackbar with options
  • success() - Show success snackbar
  • error() - Show error snackbar
  • warning() - Show warning snackbar
  • info() - Show info snackbar
  • hideSnackbar() - Hide snackbar element
  • getBackgroundColor() - Get background color for color theme
  • createIconSvg() - Create SVG icon string

Usage:

typescript
import type { SnackbarMethods } from '~/types'

const { $snackbar } = useNuxtApp()
// $snackbar implements SnackbarMethods

Snackbar Color Map ​

SnackbarColorMap ​

Color mapping type for snackbar colors.

typescript
type SnackbarColorMap = Record<SnackbarColor, string>

Structure:

typescript
{
  success: string
  error: string
  warning: string
  info: string
}

Constants ​

SNACKBAR_COLORS ​

Default color values for each snackbar type.

typescript
export const SNACKBAR_COLORS: SnackbarColorMap = {
  success: '#256029',
  error: '#B00020',
  warning: '#856404',
  info: '#0C5460'
} as const

Color Values:

  • success: '#256029' - Green
  • error: '#B00020' - Red
  • warning: '#856404' - Orange/Yellow
  • info: '#0C5460' - Blue

Usage:

typescript
import { SNACKBAR_COLORS } from '~/types'

const successColor = SNACKBAR_COLORS.success // '#256029'

Usage Examples ​

Using Snackbar Methods ​

typescript
const { $snackbar } = useNuxtApp()

// Success notification
$snackbar.success('Operation completed!')

// Error notification
$snackbar.error('An error occurred!')

// Warning notification
$snackbar.warning('Please review your input!')

// Info notification
$snackbar.info('New features available!')

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

Using Snackbar Colors ​

typescript
import { SNACKBAR_COLORS } from '~/types'

// Get color value
const errorColor = SNACKBAR_COLORS.error // '#B00020'

// Use in styling
const style = {
  borderColor: SNACKBAR_COLORS.success
}

Using Snackbar Options ​

typescript
import type { SnackbarOptions, SnackbarColor } from '~/types'

const options: SnackbarOptions = {
  message: 'Custom notification',
  color: 'info' as SnackbarColor,
  timeout: 5000
}
  • Component - From Vue
  • Used by snackbar plugin
  • Used by snackbar composable

Import Example ​

typescript
// Import types
import type {
  SnackbarColor,
  SnackbarOptions,
  SnackbarMethods,
  SnackbarColorMap
} from '~/types'

// Import constants
import { SNACKBAR_COLORS } from '~/types'

Notes ​

  • All snackbar types are exported from ~/types
  • SNACKBAR_COLORS is exported as a constant (not just a type)
  • Color values are defined as const for type safety
  • Methods interface matches snackbar plugin implementation
  • Supports custom icons and timeouts