aliowa / livewire-toasts
Laravel Livewire toast notifications using Alpine JS
Installs: 23
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 1
Forks: 1
Open Issues: 0
Language:Blade
Requires
- laravel/framework: ^8.0
- livewire/livewire: ^2.0
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
Requirements
- AlpineJS version 3.0 or higher
Installation
You can install the package via composer:
composer require aliowa/livewire-toasts
Add the x-aliowa-livewire-toasts
component to your app layout view:
<body> <!-- body here --> <x-aliowa-livewire-toasts /> </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/aliowa/**/views/**/*.blade.php', ],
Usage
Livewire Component Setup
Add Toastable
trait to your livewire component:
<?php namespace App\Http\Livewire; use Aliowa\LivewireToasts\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=aliowa-livewire-toasts:views
Now edit the view file resources/views/vendor/components/aliowa/livewire-toasts/components/toasts.blade.php
. The package will use this view to render the component.