> ## Documentation Index
> Fetch the complete documentation index at: https://veekthoven-laravel-inertia-toast-24-61.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```vue theme={null}
<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

```typescript theme={null}
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

<ResponseField name="items" type="ComputedRef<ToastItem[]>">
  Reactive computed reference to all currently active toast items. Updates automatically when toasts are added or removed.

  ```typescript theme={null}
  const toast = useToast()
  console.log(toast.items.value) // Array of ToastItem
  ```
</ResponseField>

<ResponseField name="config" type="ComputedRef<ToastConfig>">
  Reactive computed reference to the current toast configuration. Reflects the global settings configured through the plugin.

  ```typescript theme={null}
  const toast = useToast()
  console.log(toast.config.value.position) // 'top-right'
  ```
</ResponseField>

## Methods

### success

<ResponseField name="success" type="(message: string, options?: ToastOptions) => void">
  Display a success toast notification.

  **Parameters:**

  <ParamField path="message" type="string" required>
    The main message to display in the toast.
  </ParamField>

  <ParamField path="options" type="ToastOptions">
    Optional configuration for this specific toast.

    <ParamField path="options.title" type="string">
      Optional title displayed above the message in semibold font.
    </ParamField>

    <ParamField path="options.duration" type="number">
      Custom duration in milliseconds for this toast. Overrides the global duration setting.
    </ParamField>
  </ParamField>

  **Example:**

  ```typescript theme={null}
  toast.success('User created successfully')

  toast.success('Profile updated', {
    title: 'Success',
    duration: 3000
  })
  ```
</ResponseField>

### error

<ResponseField name="error" type="(message: string, options?: ToastOptions) => void">
  Display an error toast notification.

  **Parameters:**

  <ParamField path="message" type="string" required>
    The error message to display.
  </ParamField>

  <ParamField path="options" type="ToastOptions">
    Optional configuration for this specific toast.
  </ParamField>

  **Example:**

  ```typescript theme={null}
  toast.error('Failed to delete item')

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

### info

<ResponseField name="info" type="(message: string, options?: ToastOptions) => void">
  Display an informational toast notification.

  **Parameters:**

  <ParamField path="message" type="string" required>
    The informational message to display.
  </ParamField>

  <ParamField path="options" type="ToastOptions">
    Optional configuration for this specific toast.
  </ParamField>

  **Example:**

  ```typescript theme={null}
  toast.info('New version available')

  toast.info('Check your email for verification link', {
    title: 'Email Sent'
  })
  ```
</ResponseField>

### warning

<ResponseField name="warning" type="(message: string, options?: ToastOptions) => void">
  Display a warning toast notification.

  **Parameters:**

  <ParamField path="message" type="string" required>
    The warning message to display.
  </ParamField>

  <ParamField path="options" type="ToastOptions">
    Optional configuration for this specific toast.
  </ParamField>

  **Example:**

  ```typescript theme={null}
  toast.warning('This action cannot be undone')

  toast.warning('Storage space running low', {
    title: 'Warning',
    duration: 10000
  })
  ```
</ResponseField>

### remove

<ResponseField name="remove" type="(id: string) => void">
  Manually remove a specific toast by its ID.

  **Parameters:**

  <ParamField path="id" type="string" required>
    The unique identifier of the toast to remove.
  </ParamField>

  **Example:**

  ```typescript theme={null}
  const toast = useToast()

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

### clear

<ResponseField name="clear" type="() => void">
  Remove all active toasts immediately.

  **Example:**

  ```typescript theme={null}
  const toast = useToast()

  // Clear all toasts
  toast.clear()
  ```
</ResponseField>

## Complete example

```vue theme={null}
<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>
```

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