DOCSEARCHbyAlgolia
Submit Docs

livewire-toaster

repository·master·Indexed 19 days ago

https://github.com/masmerise/livewire-toaster

A Laravel package providing seamless toast notifications for Livewire applications. It allows developers to dispatch toasts from Controllers, Livewire Components using the Toastable trait, or the front-end via JavaScript and Alpine.js. Features include a Toaster facade, PendingToast for fine-grained control, automatic translation support, and customizable behavior for alignment, duration, and duplicate suppression.

Tokens
3.2K
Snippets
17
Records
23
Agent score
18%

What's inside livewire-toaster

  1. Configure accessibility and duration adjustments

    master
    When the accessibility configuration is set to true, Toaster automatically increases the on-screen duration of a toast to ensure users have enough time to read it. It adds 1 second to the duration for every 100 words in the message.

  2. Configure duplicate toast behavior (Replace vs Suppress)

    master

    Toaster provides two ways to handle similar toasts, controlled via configuration:

    1. Replacing (replace: true): Disposes of any existing toast that is similar (same duration, message, and type) before showing the new one. This takes precedence over suppress.
    2. Suppressing (suppress: true): Prevents a new toast from appearing if an identical toast (same duration, message, and type) is already on-screen.

  8. Adjust the Toaster import for v2

    master

    In version 2, Alpine is automatically registered by Livewire. You must remove manual Alpine.plugin or Alpine.start calls from your JavaScript entry point (e.g., app.js) and instead import the toaster resources directly.

    Instead of manually initializing Alpine and registering the plugin, simply import the toaster's JS resources.

    import './bootstrap';
+ import '../../vendor/masmerise/livewire-toaster/resources/js';

- import Alpine from 'alpinejs';
- import Toaster from '../../vendor/masmerise/livewire-toaster/resources/js';

- Alpine.plugin(Toaster);

- window.Alpine = Alpine;
- Alpine.start();

  9. Unit test toast dispatching

    master

    Toaster provides testing utilities to assert that toasts were dispatched. Use Toaster::fake() to initialize the fake and Toaster::assertDispatched('message') to verify behavior.

    Note: If using automatic translation, assert against the translation keys rather than the rendered human-readable strings.

    use Masmerise\Toaster\Toaster;

public function test_example(): void
{
    Toaster::fake();
    Toaster::assertNothingDispatched();

    // ... perform action

    Toaster::assertDispatched('Welcome!');
}

  10. Customize Toaster Blade views

    master

    To customize the appearance of toasts, publish the default views to your application:

    php artisan vendor:publish --tag=toaster-views

    The views will be located in resources/views/vendor/toaster.

    Warning: When modifying hub.blade.php, you must preserve the x-data, x-init, and x-for directives to ensure the Alpine.js logic continues to function correctly.

  11. Configure Tailwind CSS for Toaster styles

    master

    If you are using the default toast views, you must register the package's Blade templates in your Tailwind configuration so they are not purged.

    For Tailwind CSS v4+ (Recommended): Add the @source directive to your main CSS entry point:

    @import "tailwindcss";
@source '../../vendor/masmerise/livewire-toaster/resources/views/*.blade.php';

    For Tailwind CSS < 4.x (or using tailwind.config.js): Add the path to the content array in your configuration file:

    export default {
    content: [
        './resources/**/*.blade.php',
        './vendor/masmerise/livewire-toaster/resources/views/*.blade.php',
    ],
};