How to make confirmation alert in Livewire

//livewiere component

    public function destroy($orderId)
    {
        Order::find($orderId)->delete();

        session()->flash('message','Order deleted successfully!');
    }

//blade

//deleteButton -> triggers the sweetAlert

<a href="#"  wire:click="$emit('triggerDelete',{{ $order->id }})">
	<span class="ua-icon-alert-close text-danger"></span>
</a>

//scripts stack

@push('scripts')
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {

        @this.on('triggerDelete', orderId => {
            Swal.fire({
                title: 'Are You Sure?',
                text: 'Order record will be deleted!',
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: 'var(--success)',
                cancelButtonColor: 'var(--primary)',
                confirmButtonText: 'Delete!'
            }).then((result) => {
		//if user clicks on delete
                if (result.value) {
		     // calling destroy method to delete
                    @this.call('destroy',orderId)
		    // success response
                    responseAlert({title: session('message'), type: 'success'});
                    
                } else {
                    responseAlert({
                        title: 'Operation Cancelled!',
                        type: 'success'
                    });
                }
            });
        });
    })
</script>
@endpush

Cheers mate!

I posted an idea here

https://forum.laravel-livewire.com/t/delete-confirmation-dialog-box/78/2

There are other suggestions on the livewire forum

You can use sweetalert2 to make a livewire confirm/alert dialog/popup/modal on delete/disable/edit events. Just use addEventListener on JS side and dispatchBrowserEvent on a livewire side. Just an example and tutorial https://stackoverflow.com/a/75830246