Skip to main content

​
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

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

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'