Toasts for Laravel Livewire with Bootstrap 5

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

Documentation

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

Requirements

• Bootstrap 5 must be installed via webpack first

Installation

Require the package:

composer require pleshkovpa/toasts-livewire

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

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

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

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

Usage

Showing 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.

Emitting Events

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!'));
}

Publishing Assets

Custom Config

Customize the toasts configuration by publishing the config file:

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

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

Custom View

Use your own toasts view by publishing the view file:

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

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