Skip to main content

​
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.