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

# Components

> Vue components for rendering toast notifications

## Toasts

The main container component that renders all active toast notifications. It handles positioning, transitions, and manages the list of toasts.

### Usage

```vue theme={null}
<template>
  <div>
    <!-- Your app content -->
    <Toasts />
  </div>
</template>

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

### Features

* Automatic positioning based on plugin configuration
* Smooth enter/exit transitions using Vue's `TransitionGroup`
* Responsive design with fixed positioning
* Maximum width constraint (`max-w-sm`)
* Z-index of 50 for proper layering

### Position-based animations

The component dynamically adjusts animations based on position:

* **Left positions**: Slides in from left
* **Right positions**: Slides in from right
* **Center positions**: Slides in from top or bottom
* All animations include opacity transitions

<Note>
  This component does not accept any props. All configuration is handled through the plugin options.
</Note>

## ToastItem

Individual toast notification component with icon, message, title, and close button. Automatically handles auto-dismiss based on duration.

### Props

<ParamField path="toast" type="ToastItem" required>
  The toast object to display.

  ```typescript theme={null}
  interface ToastItem {
    id: string
    message: string
    level: 'success' | 'error' | 'info' | 'warning'
    title: string | null
    duration: number | null
  }
  ```
</ParamField>

### Events

<ResponseField name="remove" type="(id: string) => void">
  Emitted when the toast should be removed. The parent `Toasts` component handles this event to remove the toast from the store.
</ResponseField>

### Usage

```vue theme={null}
<template>
  <ToastItem
    :toast="toastData"
    @remove="handleRemove"
  />
</template>

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

const toastData = {
  id: 'toast-1',
  message: 'Operation completed successfully',
  level: 'success',
  title: 'Success',
  duration: 5000
}

function handleRemove(id: string) {
  console.log('Remove toast:', id)
}
</script>
```

### Slots

<ParamField path="icon" type="slot">
  Custom icon slot to override the default level-based icon. The slot receives no props.

  ```vue theme={null}
  <ToastItem :toast="toast">
    <template #icon>
      <svg><!-- Custom icon --></svg>
    </template>
  </ToastItem>
  ```
</ParamField>

### Level-based styling

Each toast level has distinct colors and icons:

<Tabs>
  <Tab title="Success">
    * Background: Green (bg-green-50, text-green-800)
    * Icon: Checkmark circle with green background
    * Icon background: bg-green-100, text-green-500
  </Tab>

  <Tab title="Error">
    * Background: Red (bg-red-50, text-red-800)
    * Icon: X circle with rose background
    * Icon background: bg-rose-100, text-rose-500
  </Tab>

  <Tab title="Warning">
    * Background: Yellow (bg-yellow-50, text-yellow-800)
    * Icon: Exclamation triangle with yellow background
    * Icon background: bg-yellow-100, text-yellow-500
  </Tab>

  <Tab title="Info">
    * Background: Blue (bg-blue-50, text-blue-800)
    * Icon: Information circle with blue background
    * Icon background: bg-blue-100, text-blue-500
  </Tab>
</Tabs>

### Auto-dismiss behavior

* Duration is determined by `toast.duration` or falls back to the global config duration
* If duration is `0` or negative, auto-dismiss is disabled
* Timer starts when the component mounts
* Emits `remove` event when timer expires

### Structure

Each toast includes:

1. **Icon container**: 8x8 rounded square with level-based background
2. **Content area**:
   * Optional title in semibold font
   * Message text in normal weight
3. **Close button**: Manual dismiss with hover effects and focus ring

<Note>
  The component uses Tailwind CSS classes and requires Tailwind to be configured in your project.
</Note>