Interfaces

TypeScript interfaces for Vue and React components

ToastLevel

TypeScript type representing the severity level of a toast notification.

type ToastLevel = 'success' | 'error' | 'info' | 'warning'

This type corresponds to the PHP ToastLevel enum values. See the Enums page for more details.

---

ToastMessage

Represents a single toast notification message with its properties.

Properties

message · string · required

The main content of the toast notification.

level · ToastLevel · required

The severity level of the toast. Must be one of: 'success', 'error', 'info', or 'warning'.

title · string | null · required

Optional title displayed above the message. Pass null if no title is needed.

duration · number | null · required

Custom duration in milliseconds for this specific toast. If null, uses the default duration from ToastConfig.

Source

export interface ToastMessage {
  message: string
  level: ToastLevel
  title: string | null
  duration: number | null
}

Usage example

Vue

import type { ToastMessage } from '@inertiatoast/vue'

const toast: ToastMessage = {
  message: 'User created successfully',
  level: 'success',
  title: 'Success',
  duration: 3000
}

---

ToastItem

Extends ToastMessage with a unique identifier. Used internally by the Toaster component to track individual toasts.

Properties

Inherits all properties from ToastMessage:

id · string · required

Unique identifier for the toast. Generated automatically by the Toaster component.

message · string · required

The main content of the toast notification (inherited from ToastMessage).

level · ToastLevel · required

The severity level of the toast (inherited from ToastMessage).

title · string | null · required

Optional title displayed above the message (inherited from ToastMessage).

duration · number | null · required

Custom duration in milliseconds (inherited from ToastMessage).

Source

export interface ToastItem extends ToastMessage {
  id: string
}

Usage example

import type { ToastItem } from '@inertiatoast/vue'

const toastWithId: ToastItem = {
  id: 'toast-1234',
  message: 'Settings updated',
  level: 'info',
  title: null,
  duration: null
}

You typically don’t need to create ToastItem objects manually. The Toaster component automatically generates IDs for incoming ToastMessage objects.

---

ToastConfig

Configuration object for the Toaster component. Defines global settings for toast behavior and appearance.

Properties

duration · number · required

Default duration in milliseconds for all toasts. Can be overridden per toast using ToastMessage.duration.

Default: 3000

position · string · required

Screen position where toasts appear. Must be one of: 'top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', or 'bottom-center'.

Default: 'top-right'

maxVisible · number · required

Maximum number of toasts that can be visible simultaneously. Older toasts are dismissed when the limit is reached.

Default: 3

propKey · string · required

The Inertia prop key used to receive toast messages from the backend.

Default: 'toasts'

Source

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

Usage examples

Vue

import { Toaster } from '@inertiatoast/vue'

<Toaster 
  :duration="5000"
  position="bottom-right"
  :max-visible="5"
  prop-key="toasts"
/>

The configuration values are set in config/inertia-toast.php and automatically passed to the frontend. You can override them by passing props to the Toaster component.

---

Type locations

Both Vue and React packages share identical TypeScript interfaces:

• Vue: @inertiatoast/vue/src/types.ts
• React: @inertiatoast/react/src/types.ts

You can import them using:

import type { ToastMessage, ToastItem, ToastConfig, ToastLevel } from '@inertiatoast/vue'
// or
import type { ToastMessage, ToastItem, ToastConfig, ToastLevel } from '@inertiatoast/react'