README

This package allows you to dynamically display toasts notifications via Laravel Livewire components. Toasts are powered by AlpineJS and are displayed without any delay.

Documentation

Livewire Toasts

Requirements

AlpineJS version 3.0 or higher

Installation

You can install the package via composer:

composer require voltageek/livewire-toasts-flowbite

Add the x-voltageek-livewire-toasts component to your app layout view:

<body>
  <!-- body here -->
  
  <x-voltageek-livewire-toasts-flowbite />
</body>

By default toasts are styled with TailwindCSS. To autodiscover necessary classes, either publish toasts views or add package views location to your tailwind.config.js file:

module.exports = {
    content: [
        './vendor/voltageek/**/views/**/*.blade.php',
    ],

Usage

Livewire Component Setup

Add Toastable trait to your livewire component:

<?php

namespace App\Http\Livewire;

use voltageek\LivewireToastsFlowbite\Traits\Toastable;
use Livewire\Component;

class SavePost extends Component
{
    use Toastable;

    //component code
}

Showing Toasts

Show a toast providing a message to one of four methods toastSuccess, toastWarning, toastDanger, toastInfo:

public function savePost()
{
    $this->toastSuccess('Post has been successfully saved!');

    $this->toastWarning('You have reached the daily post limit!');

    $this->toastDanger('Post has not been saved!');

    $this->toastInfo('A confirmation email has been sent');
}

Publishing Assets

Custom View

By default toasts view file uses TailwindCSS, but you can publish and change the way toasts will look on your website.

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

Now edit the view file resources/views/vendor/components/voltageek/livewire-toasts-flowbite/components/toasts.blade.php. The package will use this view to render the component.

voltageek / livewire-toasts-flowbite

Maintainers

Details