Laravel Toast Flux

Frontend for shufflingpixels/laravel-toast using Livewire Flux, Tailwind CSS and Alpine.js.

This package provides a ready-made Livewire component that renders toast messages produced by the backend package shufflingpixels/laravel-toast, styled with Flux components.

Requirements

• PHP 8.1+
• Laravel 10–12 (or illuminate/support 10–12)
• Tailwind CSS 4+
• Livewire 3.5.19+
• Livewire Flux 2.5+

Installation

composer require shufflingpixels/laravel-toast-flux

The service provider is auto-discovered. No manual registration is required.

Usage

Add the toast container component to a persistent layout (e.g., just before </body> or wherever you want toasts to appear):

{{-- Renders all current toast messages --}}
<livewire:toast-flux />

Popover mode (optional)

If you pass the position attribute to the component, it renders inside a native popover element instead of a plain wrapper. This is useful if you want to show toasts in an overlay context.

<x-toast::container position="top-right" />
<x-toast::container position="top-left" />
<x-toast::container position="bottom-right" />
<x-toast::container position="bottom-left" />

Calling from livewire

use the WithToast trait in you livewire components.

<?php
 
namespace App\Livewire;
 
use ShufflingPixels\Toast\Toast;
use ShufflingPixels\Toast\Livewire\WithToast;
use Livewire\Component;
 
class Counter extends Component
{
    use WithToast;

    public $count = 1;
 
    public function increment()
    {
        Toast::info("Incremented");
        $this->count++;
    }
 
    public function render()
    {
        return view('livewire.counter');
    }
}

If doing so the livewire toast component will update without a full page load.

Customization

You can publish the Blade views and customize markup or classes:

php artisan vendor:publish --provider="ShufflingPixels\\Toast\\ToastFluxServiceProvider"

Published files live under resources/views/vendor/toast:

• livewire/container.blade.php
• components/containers/normal.blade.php
• components/containers/popover.blade.php

The default message component uses:

• Flux callout for styling
• Severity-based icon mapping (information-circle, check-circle, exclamation-circle, x-circle)
• A close button (flux:button with x-mark)
• Alpine for show/hide transitions and auto-dismiss

Tips

• Default duration is 3000 ms (set when creating messages). Set to 0 to disable auto-dismiss for a message.
• Place the container once in a shared layout to capture all toasts created during the request.
• Ensure Flux assets are included; missing styles/scripts will affect appearance and transitions.

Links

• Backend: shufflingpixels/laravel-toast (installed as a dependency)
• UI: livewire/flux (CSS/JS and Blade components)