SweetAlert2 with Livewire
Use SweetAlert2 to display animated popup alert following Livewire action
Install SweetAlert in master layout
On views that expect to use SweetAlert, or in master layout file, add a listener
1
window.addEventListener('swal',function(e){
2
Swal.fire(e.detail);
3
});
Copied!
Then trigger an event from Livewire component when you want to show the popup
1
$this->dispatchBrowserEvent('swal', ['title' => 'Feedback Saved']);
Copied!
Pass any SweetAlert config elements to style your popup
1
$this->dispatchBrowserEvent('swal', [
2
'title' => 'Feedback Saved',
3
'timer'=>3000,
4
'icon'=>'success',
5
'toast'=>true,
6
'position'=>'top-right'
7
]);
Copied!
SweetAlert2
You might instead use this package;
GitHub - jantinnerezo/livewire-alert: SweetAlert2 wrapper for Livewire
GitHub
Copy link