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.

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.

duration · number · default: "5000"

Duration in milliseconds before a toast automatically closes. Set to 0 to disable auto-close.

position · 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

maxVisible · number · default: "5"

Maximum number of toasts visible at once. Older toasts are removed when this limit is exceeded.

propKey · string · default: "toasts"

The flash message key to look for in Inertia responses. Must match the key used in your Laravel backend.

TypeScript types

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

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

Example with custom configuration

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
})