Composables

Vue composables for programmatic toast control

useToast

The useToast composable provides programmatic access to toast notifications. Use it to create, remove, or clear toasts from anywhere in your Vue components.

Usage

<script setup>
import { useToast } from 'laravel-inertia-toast/vue'

const toast = useToast()

function handleSubmit() {
  // Show a success toast
  toast.success('Form submitted successfully!')
}

function handleError() {
  // Show an error toast with title
  toast.error('Failed to save data', {
    title: 'Error',
    duration: 8000
  })
}
</script>

Return type

interface UseToastReturn {
  items: ComputedRef<ToastItem[]>
  config: ComputedRef<ToastConfig>
  success: (message: string, options?: ToastOptions) => void
  error: (message: string, options?: ToastOptions) => void
  info: (message: string, options?: ToastOptions) => void
  warning: (message: string, options?: ToastOptions) => void
  remove: (id: string) => void
  clear: () => void
}

interface ToastOptions {
  title?: string
  duration?: number
}

interface ToastItem {
  id: string
  message: string
  level: 'success' | 'error' | 'info' | 'warning'
  title: string | null
  duration: number | null
}

interface ToastConfig {
  duration: number
  position: string
  maxVisible: number
  propKey: string
}

Properties

items · ComputedRef<ToastItem[]>

Reactive computed reference to all currently active toast items. Updates automatically when toasts are added or removed.

const toast = useToast()
console.log(toast.items.value) // Array of ToastItem

config · ComputedRef<ToastConfig>

Reactive computed reference to the current toast configuration. Reflects the global settings configured through the plugin.

const toast = useToast()
console.log(toast.config.value.position) // 'top-right'

Methods

success

success · (message: string, options?: ToastOptions) => void

Display a success toast notification.

Parameters:

message · string · required

The main message to display in the toast.

options · ToastOptions

Optional configuration for this specific toast.

options.title · string

Optional title displayed above the message in semibold font.

options.duration · number

Custom duration in milliseconds for this toast. Overrides the global duration setting.

Example:

toast.success('User created successfully')

toast.success('Profile updated', {
  title: 'Success',
  duration: 3000
})

error

error · (message: string, options?: ToastOptions) => void

Display an error toast notification.

Parameters:

message · string · required

The error message to display.

options · ToastOptions

Optional configuration for this specific toast.

Example:

toast.error('Failed to delete item')

toast.error('Network request failed', {
  title: 'Connection Error',
  duration: 0 // Never auto-dismiss
})

info

info · (message: string, options?: ToastOptions) => void

Display an informational toast notification.

Parameters:

message · string · required

The informational message to display.

options · ToastOptions

Optional configuration for this specific toast.

Example:

toast.info('New version available')

toast.info('Check your email for verification link', {
  title: 'Email Sent'
})

warning

warning · (message: string, options?: ToastOptions) => void

Display a warning toast notification.

Parameters:

message · string · required

The warning message to display.

options · ToastOptions

Optional configuration for this specific toast.

Example:

toast.warning('This action cannot be undone')

toast.warning('Storage space running low', {
  title: 'Warning',
  duration: 10000
})

remove

remove · (id: string) => void

Manually remove a specific toast by its ID.

Parameters:

id · string · required

The unique identifier of the toast to remove.

Example:

const toast = useToast()

// Get the ID from the items array
const toastId = toast.items.value[0]?.id
if (toastId) {
  toast.remove(toastId)
}

clear

clear · () => void

Remove all active toasts immediately.

Example:

const toast = useToast()

// Clear all toasts
toast.clear()

Complete example

<template>
  <div>
    <button @click="showSuccess">Success</button>
    <button @click="showError">Error</button>
    <button @click="showInfo">Info</button>
    <button @click="showWarning">Warning</button>
    <button @click="clearAll">Clear All</button>
    
    <div>
      <p>Active toasts: {{ toast.items.value.length }}</p>
    </div>
  </div>
</template>

<script setup>
import { useToast } from 'laravel-inertia-toast/vue'

const toast = useToast()

function showSuccess() {
  toast.success('Operation completed', {
    title: 'Success',
    duration: 5000
  })
}

function showError() {
  toast.error('Something went wrong', {
    title: 'Error',
    duration: 0 // Never auto-dismiss
  })
}

function showInfo() {
  toast.info('Did you know?', {
    title: 'Tip'
  })
}

function showWarning() {
  toast.warning('Please review before proceeding', {
    title: 'Warning'
  })
}

function clearAll() {
  toast.clear()
}
</script>

The composable uses Vue’s reactivity system. All returned properties are reactive and will automatically update your components when toasts are added or removed.