JS Reusable SweetAlert2 Confirm Message for your livewire component

Instead of make a round trip go to the server, call a method that should some alert, with this approach you will get an instant response, also better user experience

Place the SweetAlert2 library in your app.blade.php or main template

then
Include this in your app.js or in whatever your global js file name is

window.confirmMessage=function (title=’’,message,type=‘info’,event={},size=‘33rem’){
Swal.fire({
showConfirmButton: true,
showCancelButton: true,
confirmButtonText: Continue, // also labels you can set it as parameters
cancelButtonText: ‘Cancel’,
title: <span class="text-md font-semibold">${title}</span>,
html: <span class="text-md font-semibold">${message}</span> ,
icon: type,
width: size,
customClass: {
title: ‘text-md’ // I’m using tailwind here
},
padding: ‘1rem’
}).then((result) => {
if (result.isConfirmed) {
livewire.emit(event.name,event.data); //the livewire event that we wanna call after user confirm the action
}
});

Then in your livewire component or global in your app.js, but to be more specific i use it in my component directly create a function like this

function ConfirmSave(userdata)
{
let title=¿Do you want to continue?;
let message=‘This action cannot be revert’;
let event={
name:‘checkin’, //Livewire event Name
data:userdata, // Data to event
};
confirmMessage(title,message,‘warning’,event,‘40rem’);
}

In your action button a little of alpine here (Replace [] with the right HTML button tag)
[button x-data x-on:click=“ConfirmSave(’{{$user->slug}}’)”>Save</button]

You are done, have a fast and good looking confirm message with Sweetalert2