Getting Started

Minimal Setup

Installation:

composer require jeremykenedy/laravel-toast

Publish the config file (optional but recommended for customization):

php artisan vendor:publish --provider="JeremyKenedy\LaravelToast\ToastServiceProvider" --tag="config"

First Toast:

use JeremyKenedy\LaravelToast\Facades\Toast;

// Basic success toast
Toast::success('Operation completed!');

// With title and duration
Toast::info('New message', 'You have a new notification', 5);

Blade Integration: Add the toast directive to your layout file (e.g., resources/views/layouts/app.blade.php):
```
@toast
```

First Use Case

Display a success toast after a form submission:

public function store(Request $request) {
    $validated = $request->validate([...]);
    Model::create($validated);

    Toast::success('Record saved successfully!');
    return back();
}

Implementation Patterns

Core Workflows

Controller Integration:

// Grouped toasts
Toast::group(['title' => 'Updates']);
Toast::success('Profile updated');
Toast::warning('Some fields are missing');
Toast::endGroup();

// With custom duration
Toast::error('Failed', 'Please try again', 10);

Livewire Component:

use JeremyKenedy\LaravelToast\Facades\Toast;

public function mount() {
    Toast::info('Livewire component loaded');
}

public function someAction() {
    Toast::success('Action completed');
}

Vue/React Integration: Use the provided directives in your frontend framework:

<template>
    <div v-toast-success="showToast">Click me</div>
</template>

<script>
export default {
    methods: {
        showToast() {
            this.$toast.success('Vue toast!');
        }
    }
}
</script>

Configuration Patterns

Global Defaults (in config/toast.php):

'default_duration' => 3,
'default_position' => 'top-right',
'default_animation' => 'fade',

Per-Toast Overrides:

Toast::success('Message', null, 5, [
    'position' => 'bottom-left',
    'animation' => 'slide',
]);

Framework-Specific Patterns

Framework	Usage Pattern	Example
Blade	`@toast` directive	`@toast` in layout file
Livewire	`Toast::` facade in component	`Toast::warning('Livewire event');`
Vue	`v-toast-*` directives	`<div v-toast-success="showToast">`
React	`useToast` hook	`const { toast } = useToast();`
Svelte	`toast` store	`{#toast 'success', 'Message'}`

Gotchas and Tips

Common Pitfalls

Missing @toast Directive:
- Issue: Toasts not displaying in Blade views.
- Fix: Ensure @toast is included in your layout file after opening <body> tag.
Livewire Component Not Triggering Toasts:
- Issue: Toasts not showing when called from Livewire.
- Fix: Ensure Livewire component extends Toastable trait:
```
use JeremyKenedy\LaravelToast\Traits\Toastable;
class MyComponent extends Component {
    use Toastable;
}
```
Frontend Framework Conflicts:
- Issue: Vue/React/Svelte toasts not working.
- Fix: Register the toast plugin after your framework’s core plugins:
```
// Vue example
import { createToastPlugin } from 'laravel-toast';
app.use(createToastPlugin());
```

Debugging Tips

Check Toast Queue: Use Toast::flush() to clear all queued toasts (useful for debugging).
```
Toast::flush();
```
Inspect Config: Dump the current config to verify settings:
```
dd(config('toast'));
```
Animation Issues: If animations fail, ensure your CSS framework (Tailwind/Bootstrap) is properly loaded. Override animations in resources/css/app.css if needed:
```
@import 'laravel-toast/dist/animations.css';
```

Extension Points

Custom Animations: Add animations in resources/css/app.css:

@keyframes custom-slide {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
.toast-custom-slide {
    animation: custom-slide 0.5s ease-out;
}

Then reference in config:

'animations' => [
    'custom-slide' => 'Custom Slide',
],

Custom Toast Types: Extend the Toast facade or create a helper:

Toast::extend('custom', function ($message, $title = null, $duration = null, $options = []) {
    return Toast::make('info', $message, $title, $duration, [
        'class' => 'bg-purple-500',
        ...$options,
    ]);
});

Dark Mode Support: Ensure your theme supports dark mode and configure in config/toast.php:
```
'dark_mode' => true,
'dark_class' => 'dark:bg-gray-800 dark:text-white',
```

Performance Tips

Queue Toasts Efficiently: Batch toasts in controllers to reduce DOM updates:

Toast::group(['title' => 'Batch Updates']);
Toast::success('Item 1 updated');
Toast::success('Item 2 updated');
Toast::endGroup();

Lazy-Load Animations: For large applications, load animations dynamically:

// Vue example
const { toast } = useToast();
if (!document.querySelector('.toast-animation')) {
    const link = document.createElement('link');
    link.href = '/css/laravel-toast-animations.css';
    link.rel = 'stylesheet';
    document.head.appendChild(link);
}

Laravel Toast Laravel Package