SweetAlert2 with Livewire

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
​

Livewire - Previous

Working with Javascript Components

Next - Livewire

Clearing checkboxes in Livewire

Last modified 1yr ago

Copy link