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

<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

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

ToastItem

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

Props

toast · ToastItem · required

The toast object to display.

interface ToastItem {
  id: string
  message: string
  level: 'success' | 'error' | 'info' | 'warning'
  title: string | null
  duration: number | null
}

Events

remove · (id: string) => void

Emitted when the toast should be removed. The parent Toasts component handles this event to remove the toast from the store.

Usage

<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

icon · slot

Custom icon slot to override the default level-based icon. The slot receives no props.

<ToastItem :toast="toast">
  <template #icon>
    <svg><!-- Custom icon --></svg>
  </template>
</ToastItem>

Level-based styling

Each toast level has distinct colors and icons:

Success

• Background: Green (bg-green-50, text-green-800)
• Icon: Checkmark circle with green background
• Icon background: bg-green-100, text-green-500

Error

• Background: Red (bg-red-50, text-red-800)
• Icon: X circle with rose background
• Icon background: bg-rose-100, text-rose-500

Warning

• Background: Yellow (bg-yellow-50, text-yellow-800)
• Icon: Exclamation triangle with yellow background
• Icon background: bg-yellow-100, text-yellow-500

Info

• Background: Blue (bg-blue-50, text-blue-800)
• Icon: Information circle with blue background
• Icon background: bg-blue-100, text-blue-500

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

The component uses Tailwind CSS classes and requires Tailwind to be configured in your project.