README

Toast notifications for Laravel Blade, Livewire, Alpine, and JavaScript.

Laravel Toasty works with:

standard Laravel controllers and redirects
Blade layouts
Alpine
Livewire
plain browser JavaScript

The package uses namespaced APIs so it does not clash with Flux toasts or generic toast() helpers.

See CHANGELOG.md for release history.

What You Get

<x-laravel-toasty::toasts /> Blade component
@laravelToasty Blade directive
laravel_toasty() helper
LaravelToasty facade alias
Livewire support through the InteractsWithToasts trait
window.LaravelToasty JavaScript API
bundled CSS inside the package, so Tailwind setup is not required

Requirements

PHP 8.1+
Laravel 10+
Alpine.js 3+

Livewire is optional.

Installation

Install with Composer:

composer require atomcoder/laravel-toasty

Publish the config if you want to change defaults:

php artisan vendor:publish --tag=laravel-toasty-config

Publish the views only if you want to override the package markup:

php artisan vendor:publish --tag=laravel-toasty-views

You do not need to:

install Tailwind for this package
add vendor Blade paths to Tailwind content
import a separate package stylesheet

Quick Start

1. Render the toast stack once

Add this near the end of your main layout, usually before </body>:

<x-laravel-toasty::toasts />

Or:

@laravelToasty

2. Make sure Alpine is loaded

If your app already has Alpine, you are done.

If not:

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

3. Trigger a toast

Normal Laravel request:

laravel_toasty()->success('Profile updated');

Livewire immediate toast:

$this->dispatchLaravelToastySuccess('Profile updated');

Browser JavaScript:

<script>
    window.LaravelToasty.notify('Profile updated');
</script>

How It Works

Laravel Toasty supports two main server-side flows:

Session toast

Use this in controllers, middleware, or normal Laravel request code:

laravel_toasty()->success('Saved');

That stores the toast in the session, and the next page render shows it.

Immediate Livewire toast

Use this inside a Livewire component action:

$this->dispatchLaravelToastySuccess('Saved');

That dispatches a browser event immediately through the current component, so the user sees the toast without leaving the page.

Main APIs

Helper

laravel_toasty()

Facade

LaravelToasty::success('Saved');

Blade

<x-laravel-toasty::toasts />
@laravelToasty

JavaScript

window.LaravelToasty.notify('Saved');
window.LaravelToasty.layout('expanded');

Full Usage Examples

Example 1: Standard controller redirect

Use this when the request ends with a redirect.

<?php

namespace App\Http\Controllers;

use App\Http\Requests\ProfileRequest;

class ProfileController
{
    public function update(ProfileRequest $request)
    {
        $request->user()->update($request->validated());

        laravel_toasty()->success(
            'Profile updated',
            'Your account details were saved successfully.'
        );

        return redirect()->route('profile.edit');
    }
}

Example 2: Controller with custom options

public function destroy(Project $project)
{
    $project->delete();

    laravel_toasty()->danger(
        'Project deleted',
        'This action cannot be undone.',
        [
            'position' => 'bottom-right',
            'duration' => 6000,
            'layout' => 'expanded',
        ]
    );

    return redirect()->route('projects.index');
}

Example 3: Facade usage

<?php

namespace App\Http\Controllers;

use LaravelToasty;

class DashboardController
{
    public function __invoke()
    {
        LaravelToasty::info('Welcome back');

        return view('dashboard');
    }
}

Example 4: Livewire with the trait

<?php

namespace App\Livewire;

use Livewire\Component;
use Atomcoder\Toasty\Concerns\InteractsWithToasts;

class EditProfile extends Component
{
    use InteractsWithToasts;

    public string $name = '';

    public function save(): void
    {
        auth()->user()->update([
            'name' => $this->name,
        ]);

        $this->dispatchLaravelToastySuccess(
            'Profile updated',
            'Your changes were saved immediately.',
            ['position' => 'top-right']
        );
    }

    public function render()
    {
        return view('livewire.edit-profile');
    }
}

Example 5: Livewire redirect

If your Livewire action redirects away, use the normal session helper:

public function createWorkspace()
{
    $workspace = auth()->user()->workspaces()->create([
        'name' => $this->name,
    ]);

    laravel_toasty()->success(
        'Workspace created',
        'You have been taken to your new workspace.'
    );

    return $this->redirect(route('workspaces.show', $workspace));
}

Example 6: More Livewire trait methods

The trait gives you dedicated immediate-dispatch methods:

$this->dispatchLaravelToastyInfo('Draft saved');
$this->dispatchLaravelToastyWarning('Storage almost full');
$this->dispatchLaravelToastyDanger('Delete failed', 'Please try again.');
$this->dispatchLaravelToastyLike('Post liked');
$this->dispatchLaravelToastyBell('Reminder set', 'We will notify you tomorrow.');

Example 7: Blade and Alpine button

<button
    type="button"
    x-on:click="window.LaravelToasty.notify('Saved from Alpine', {
        type: 'success',
        description: 'The client-side action completed.',
        position: 'bottom-right'
    })"
>
    Save
</button>

Example 8: Plain JavaScript

<script>
    window.LaravelToasty.notify('Deployment complete', {
        type: 'success',
        description: 'Everything is live.',
        position: 'top-right',
        duration: 5000,
    });
</script>

Example 9: HTML toast

Only use trusted HTML.

laravel_toasty()->html(<<<'HTML'
    <div style="padding: 1rem;">
        <strong>Deployment complete</strong>
        <div style="margin-top: .5rem; opacity: .8;">
            Version 2.0.0 is now live.
        </div>
    </div>
HTML, [
    'position' => 'bottom-right',
    'duration' => 10000,
]);

Example 10: Multiple toasts in one request

laravel_toasty()->success('Project created');
laravel_toasty()->info('Invite your team');
laravel_toasty()->warning('Remember to configure billing');

Example 11: Inspecting and clearing queued session toasts

This only works with the session queue, not the already-mounted browser stack.

$toasts = laravel_toasty()->all();

if (count($toasts) > 5) {
    laravel_toasty()->clear();
}

Available Methods

These methods are available through laravel_toasty() and LaravelToasty:

flash($message, $options = [])
success($message, $description = null, $options = [])
info($message, $description = null, $options = [])
warning($message, $description = null, $options = [])
danger($message, $description = null, $options = [])
like($message, $description = null, $options = [])
bell($message, $description = null, $options = [])
html($html, $options = [])

These methods are only useful for the session-backed queue:

all()
clear()

Toast Options

Every toast accepts these options:

Option	Type	Description
`description`	`string	null`
`type`	`default`, `success`, `info`, `warning`, `danger`, `like`, `bell`	Visual style and icon
`position`	`top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`	Stack location
`duration`	`int`	Auto-dismiss time in milliseconds. Use `0` to keep it open
`closeable`	`bool`	Whether the close button is shown
`layout`	`default`, `expanded`	Stack layout mode
`html`	`string	null`

JavaScript API

The package registers:

window.LaravelToasty
window.laravelToasty

Available methods:

window.LaravelToasty.notify(message, options = {})
window.LaravelToasty.toast(message, options = {})
window.LaravelToasty.layout(layout = 'expanded', eventName = null)
window.LaravelToasty.setLayout(layout = 'expanded', eventName = null)

Example:

<script>
    window.LaravelToasty.notify('Warning', {
        type: 'warning',
        description: 'Storage is almost full.',
        duration: 0,
        closeable: true,
    });

    window.LaravelToasty.layout('expanded');
</script>

Blade Component Props

You can override defaults directly on the component:

<x-laravel-toasty::toasts
    position="bottom-right"
    layout="expanded"
    :duration="7000"
    :padding-between-toasts="20"
    :closeable="false"
    :z-index="120"
    theme="toasty"
/>

Useful props:

position
layout
duration
padding-between-toasts
event-name
layout-event-name
closeable
z-index
theme
styles
legacy-aliases

Configuration

Publish the config:

php artisan vendor:publish --tag=laravel-toasty-config

This creates:

config/laravel_toasty.php

Main config keys:

event_name
layout_event_name
session_key
legacy_aliases
position
layout
duration
padding_between
closeable
z_index
theme
themes
styles

Example:

return [
    'event_name' => 'laravel-toasty:notify',
    'layout_event_name' => 'laravel-toasty:layout',
    'session_key' => 'laravel_toasty.toasts',
    'legacy_aliases' => false,

    'position' => 'top-center',
    'layout' => 'default',
    'duration' => 4000,
    'padding_between' => 15,
    'closeable' => true,
    'z_index' => 99,

    'theme' => 'pines',
    'styles' => [],
];

Themes

Built-in themes:

pines
toasty
glass

Change the theme:

'theme' => 'toasty',

Override part of a theme:

'styles' => [
    'max_width' => '30rem',
    'base' => [
        'radius' => '1.25rem',
    ],
    'types' => [
        'success' => [
            'background' => 'linear-gradient(135deg, #166534, #14532d)',
        ],
    ],
],

You can also pass styles directly to the Blade component for per-page overrides.

Customizing the View

Publish the views:

php artisan vendor:publish --tag=laravel-toasty-views

Published path:

resources/views/vendor/laravel-toasty/components/toasts.blade.php

Important: published vendor views override future package view updates until you remove or update them yourself.

Migration From Older Versions

If you are upgrading from the older generic naming:

Old	New
`toasty()`	`laravel_toasty()`
`@toasty`	`@laravelToasty`
`<x-toasty::toasts />`	`<x-laravel-toasty::toasts />`
`window.Toasty`	`window.LaravelToasty`
`window.toast(...)`	`window.LaravelToasty.notify(...)`

If needed, you can temporarily enable:

'legacy_aliases' => true,

Troubleshooting

Toasts do not show at all

Check:

Alpine is loaded
the stack is rendered once in your layout
your layout includes <x-laravel-toasty::toasts />

Livewire action runs but no toast appears

If you stay on the same page, use:

$this->dispatchLaravelToastySuccess('Saved');

with the InteractsWithToasts trait on the component.

If you redirect away, use:

laravel_toasty()->success('Saved');

You still see old markup or old errors after updating

Look for stale published views:

rg -n "window\\.LaravelToastyComponent|window\\.ToastyComponent" resources/views vendor

Then clear caches:

php artisan optimize:clear
composer clear-cache

`all()` and `clear()` do not affect Livewire toasts already visible on screen

That is expected. They only work with the server-side session queue.

Queue jobs or background jobs

Untargeted helper calls are session-backed, so they are meant for the web request lifecycle, not queue workers.

Testing

Run the package tests with:

composer test

Credits

DevDojo Pines Toast for the original interaction inspiration

License

MIT

atomcoder / laravel-toasty

Maintainers

Package info

Statistics

Security