This package allows you to dynamically show Bootstrap toasts via Laravel Livewire components.

• Requirements
• Installation
• Usage
  • Showing Toasts
  • Emitting Events
• Publishing Assets
  • Custom Config
  • Custom View

• Bootstrap 5 must be installed via webpack first

Require the package:

composer require bastinald/laravel-livewire-toasts

Add the livewire:toasts component to your app layout view:

<livewire:toasts/>
<livewire:scripts/>
<script src="{{ asset('js/app.js') }}"></script>

Require ../../vendor/bastinald/laravel-livewire-toasts/resources/js/toasts in your app javascript file:

require('@popperjs/core');
require('bootstrap');
require('../../vendor/bastinald/laravel-livewire-toasts/resources/js/toasts');

Show a toast by emitting the showToast event with the color & message:

public function save()
{
    $this->validate();

    $this->user->update([
        'name' => $this->name,
        'email' => $this->email,
    ]);

    $this->emit('showToast', 'success', __('User updated!'));
}

The color should be a Bootstrap color name e.g. success, danger, info.

You can emit events inside your views:

<button type="button" wire:click="$emit('showToast', 'danger', 'Closing!')">
    {{ __('Close') }}
</button>

Or inside your components, just like any normal Livewire event:

public function save()
{
    $this->validate();

    // save the record

    $this->emit('showToast', 'info', __('Record saved!'));
}

Customize the toasts configuration by publishing the config file:

php artisan vendor:publish --tag=laravel-livewire-toasts:config

Now you can easily change things like the hide delay and error message.

Use your own toasts view by publishing the view file:

php artisan vendor:publish --tag=laravel-livewire-toasts:views

Now edit the view file inside resources/views/vendor/laravel-livewire-toasts. The package will use this view to render the component.