Skip to main content
You can trigger toast notifications directly from your frontend components using the useToast() composable (Vue) or hook (React). This is useful for client-side interactions like copy-to-clipboard, form submissions, or any action that doesn’t require a server round-trip.

​
Vue 3

The useToast composable returns methods for triggering toasts and accessing toast state: 
<script setup>
import { useToast } from '@laravel-inertia-toast/vue'

const { success, error, info, warning, remove, clear } = useToast()

function handleCopy() {
  navigator.clipboard.writeText('some text')
  success('Copied to clipboard!')
}

function handleDelete() {
  // Perform deletion
  error('Item has been removed.', { title: 'Deleted' })
}
</script>

<template>
  <div>
    <button @click="handleCopy">Copy</button>
    <button @click="handleDelete">Delete</button>
  </div>
</template>

​
Return value

The useToast() composable returns: 
{
  items: ComputedRef<ToastItem[]>,
  config: ComputedRef<ToastConfig>,
  success: (message: string, options?: { title?: string; duration?: number }) => void,
  error: (message: string, options?: { title?: string; duration?: number }) => void,
  info: (message: string, options?: { title?: string; duration?: number }) => void,
  warning: (message: string, options?: { title?: string; duration?: number }) => void,
  remove: (id: string) => void,
  clear: () => void
}

​
React

The useToast hook returns the same methods for triggering toasts: 
import { useToast } from '@laravel-inertia-toast/react'

function MyComponent() {
  const { success, error, info, warning, remove, clear } = useToast()

  function handleCopy() {
    navigator.clipboard.writeText('some text')
    success('Copied to clipboard!')
  }

  function handleDelete() {
    // Perform deletion
    error('Item has been removed.', { title: 'Deleted' })
  }

  return (
    <div>
      <button onClick={handleCopy}>Copy</button>
      <button onClick={handleDelete}>Delete</button>
    </div>
  )
}
The useToast hook must be used within a <ToastProvider> component. If you try to use it outside the provider, you’ll get an error.

​
Return value

The useToast() hook returns: 
{
  items: ToastItem[],
  config: 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
}

​
Toast methods

All four toast methods share the same signature: 
(message: string, options?: { title?: string; duration?: number }) => void

​
Success toasts

Use for successful operations: 
<script setup>
import { useToast } from '@laravel-inertia-toast/vue'

const { success } = useToast()

function handleSubmit() {
  // Submit form
  success('Form submitted successfully!')
}
</script>

​
Error toasts

Use for errors and failures: 
<script setup>
import { useToast } from '@laravel-inertia-toast/vue'

const { error } = useToast()

async function handleRequest() {
  try {
    await fetchData()
  } catch (err) {
    error('Failed to load data', { title: 'Error' })
  }
}
</script>

​
Info toasts

Use for informational messages: 
<script setup>
import { useToast } from '@laravel-inertia-toast/vue'

const { info } = useToast()

function showTip() {
  info('Press Ctrl+K to open command palette')
}
</script>

​
Warning toasts

Use for warnings: 
<script setup>
import { useToast } from '@laravel-inertia-toast/vue'

const { warning } = useToast()

function checkStorage() {
  if (isStorageLow()) {
    warning('Storage space is running low', { title: 'Warning' })
  }
}
</script>

​
Options

All toast methods accept an optional second parameter with the following options:

​
Title

Add a title to provide context: 
<script setup>
import { useToast } from '@laravel-inertia-toast/vue'

const { success } = useToast()

success('Your changes have been saved.', { title: 'Success' })
</script>

​
Duration

Override the default auto-dismiss duration (in milliseconds): 
<script setup>
import { useToast } from '@laravel-inertia-toast/vue'

const { info } = useToast()

// Show for 10 seconds
info('This is a longer message.', { duration: 10000 })
</script>

​
Combining options

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

const { warning } = useToast()

warning('Your session will expire soon.', {
  title: 'Session Warning',
  duration: 15000
})
</script>

​
Managing toasts

​
Remove a specific toast

You can manually dismiss a toast using its ID: 
<script setup>
import { useToast } from '@laravel-inertia-toast/vue'

const { items, remove } = useToast()

function removeFirstToast() {
  if (items.value.length > 0) {
    remove(items.value[0].id)
  }
}
</script>

​
Clear all toasts

Dismiss all visible toasts at once: 
<script setup>
import { useToast } from '@laravel-inertia-toast/vue'

const { clear } = useToast()
</script>

<template>
  <button @click="clear">Clear All</button>
</template>

​
Accessing toast state

You can access the current toast items and configuration: 
<script setup>
import { useToast } from '@laravel-inertia-toast/vue'

const { items, config } = useToast()

// items is a ComputedRef<ToastItem[]>
// config is a ComputedRef<ToastConfig>
</script>

<template>
  <div>Active toasts: {{ items.length }}</div>
  <div>Position: {{ config.position }}</div>
</template>

​
TypeScript types

​
ToastItem

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

​
ToastConfig

interface ToastConfig {
  duration: number        // Default duration in milliseconds
  position: string        // Toast position on screen
  maxVisible: number      // Maximum number of visible toasts
  propKey: string         // Inertia flash key
}

​
ToastOptions

interface ToastOptions {
  title?: string          // Optional toast title
  duration?: number       // Optional custom duration in milliseconds
}

​
Common patterns

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

const { success, error } = useToast()

async function copyToClipboard(text: string) {
  try {
    await navigator.clipboard.writeText(text)
    success('Copied to clipboard!')
  } catch (err) {
    error('Failed to copy', { title: 'Error' })
  }
}
</script>

Build docs developers (and LLMs) love

Get started for freeTalk to us