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

# Plugin

> Configure and install the InertiaToast Vue 3 plugin

## Installation

The `InertiaToast` plugin must be installed in your Vue application to enable toast notifications. It automatically listens for Inertia flash messages and displays them as toasts.

```typescript theme={null}
import { createApp } from 'vue'
import { InertiaToast } from 'laravel-inertia-toast/vue'

const app = createApp({})

app.use(InertiaToast, {
  duration: 5000,
  position: 'top-right',
  maxVisible: 5,
  propKey: 'toasts'
})
```

## Configuration options

All configuration options are optional. The plugin will use default values if not specified.

<ParamField path="duration" type="number" default="5000">
  Duration in milliseconds before a toast automatically closes. Set to `0` to disable auto-close.
</ParamField>

<ParamField path="position" type="string" default="top-right">
  Position where toasts appear on the screen.

  Valid values:

  * `top-left`
  * `top-center`
  * `top-right`
  * `bottom-left`
  * `bottom-center`
  * `bottom-right`
</ParamField>

<ParamField path="maxVisible" type="number" default="5">
  Maximum number of toasts visible at once. Older toasts are removed when this limit is exceeded.
</ParamField>

<ParamField path="propKey" type="string" default="toasts">
  The flash message key to look for in Inertia responses. Must match the key used in your Laravel backend.
</ParamField>

## TypeScript types

```typescript theme={null}
import type { Plugin } from 'vue'

export interface InertiaToastOptions extends Partial<ToastConfig> {}

export const InertiaToast: Plugin

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

## How it works

The plugin automatically:

1. Configures the global toast settings based on provided options
2. Listens for Inertia's `flash` event on the router
3. Extracts toast messages from flash data using the configured `propKey`
4. Adds each toast message to the internal store for display

<Note>
  The plugin only runs in browser environments. It safely returns early during server-side rendering.
</Note>

## Example with custom configuration

```typescript theme={null}
import { createApp } from 'vue'
import { InertiaToast } from 'laravel-inertia-toast/vue'

const app = createApp({})

// Custom configuration
app.use(InertiaToast, {
  duration: 3000,           // Close after 3 seconds
  position: 'bottom-right', // Bottom right corner
  maxVisible: 3,            // Show max 3 toasts
  propKey: 'notifications'  // Custom flash key
})
```