Getting Started

Start by installing the package via Composer:

composer require usernotnull/tall-toasts

Then follow the minimal setup steps:

Add <livewire:toasts /> near the top of your <body> in your main layout (e.g., layouts/app.blade.php).

import { Alpine, Livewire } from 'livewire';
import ToastComponent from 'tall-toasts'; // or full vendor path if not auto-discovered  
Alpine.plugin(ToastComponent);
Alpine.start();

(Optional but recommended) Use WireToast trait in Livewire components that trigger toasts.
Build CSS/JS as usual — ensure vendor/usernotnull/tall-toasts/resources/views/**/*.blade.php is included in Tailwind’s content for JIT.

First use case: Display a success toast from a Livewire component action:

use Livewire\Component;
use Usernotnull\Toast\Concerns\WireToast;

class SaveForm extends Component
{
    use WireToast;

    public function submit()
    {
        // ... save logic ...
        toast()->success('Form saved successfully!')->push();
    }
}

Implementation Patterns

Backend-Driven Toasts

Use toast() helper anywhere — controllers, views, components — to queue toasts for the next page load (via pushOnNextPage()) or immediate (via push()).

Chain methods for configuration:

toast()
    ->danger('Critical error!', 'Oops')
    ->duration(0) // sticky
    ->doNotSanitize() // enables HTML like <br>, <strong>
    ->push();

Use debug() to only show in non-production environments (also logs to Laravel log).

Frontend-Driven Toasts

From Alpine or inline scripts:

document.addEventListener('alpine:init', () => {
  Alpine.data('searchForm', () => ({
    async submit() {
      // ... validation ...
      Toast.success('Search results updated', 'Done', 3000);
    }
  }));
});

All methods (success, info, warning, danger, debug) accept (message, title?, duration?).

Integration Workflow

Livewire + Toasts: Always use the WireToast trait in components that call toast() during a Livewire request. Without it, toasts may not display or repeat on refresh.
Blade views: You may call toast() directly in Blade (e.g., @php toast()->info('Welcome!')->push(); @endphp).
Customization: Publish views (vendor:publish) to tweak content.blade.php, icon.blade.php, or toasts.blade.php — no external CSS needed since everything uses Tailwind classes.

Gotchas and Tips

Common Pitfalls

❌ push() vs pushOnNextPage(): push() triggers now (use in redirects or non-Livewire), while pushOnNextPage() waits for next full page load (ideal for redirects from Livewire). Misusing them causes toasts to duplicate or disappear.
❌ Forgetting WireToast trait in Livewire components that trigger toast() — results in silent toast failures.
❌ Missing content paths in tailwind.config.js for JIT → missing toast styles or broken icons (especially icon.blade.php uses svg paths).
❌ doNotSanitize() on user-submitted content — security risk! Only use when trusted (e.g., system-generated messages).

Debugging

Toast not showing? Check browser console for Alpine errors, verify <livewire:toasts /> is before @livewireScriptConfig, and that app.js includes the plugin before Livewire.start().
Toasts duplicating on refresh? Likely missing WireToast or using push() after redirect() (use pushOnNextPage() instead).
Toasts look broken? Run npm run build after updating tailwind.config.js, and clear view cache: php artisan view:clear.

Pro Tips

Use duration(0) to create persistent toasts (e.g., for critical warnings).
Override default config (config/tall-toasts.php) to globally set duration or load_delay.
Use debug() during development — it logs messages to Laravel log and only renders in APP_ENV=local.
For RTL support, ensure <html dir="rtl"> — the default layout supports this out-of-the-box.
To extend behavior (e.g., auto-dismiss after scroll), hook into Alpine’s event system or publish/override toasts.blade.php.

Tall Toasts Laravel Package