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

window.addEventListener('swal',function(e){ 
    Swal.fire(e.detail);
});

Then trigger an event from Livewire component when you want to show the popup

$this->dispatchBrowserEvent('swal', ['title' => 'Feedback Saved']);

Pass any SweetAlert config elements to style your popup

$this->dispatchBrowserEvent('swal', [
	'title' => 'Feedback Saved',
	'timer'=>3000,
	'icon'=>'success',
	'toast'=>true,
	'position'=>'top-right'
]);

You might instead use this package;

Last updated 3 years ago