How to use SweetAlert2 with Livewire

3 min readFeb 17, 2021

I got too many requests for adding confirmation alerts feature to realrashid/sweet-alert package this realrashid/sweet-alert/issues/57 is one of the earliest request for adding confirmation alerts feature but unfortunately i haven’t added this feature yet because i haven’t found the best way to achieve this.

So Today I found an easy way to do this without adding the support for this feature in realrashid/sweet-alert package with the help of Livewire 🎉

So without any further due Let’s Begin 🔥

First Install the realrashid/sweet-alert package in your project if not installed yet 😢

composer require realrashid/sweet-alert

Then configure the package.

Include 'sweetalert::alert' view in master layout

@include('sweetalert::alert')

and run the below command to publish the package assets.

php artisan sweetalert:publish

Yahoooooooo You Have Successfully Installed realrashid/sweet-alert 😉

For more info checkout the documentation.
sweet-alert/documentation 📘

Note: You have to enable SWEET_ALERT_ALWAYS_LOAD_JS in your .env file!

Like this SWEET_ALERT_ALWAYS_LOAD_JS=true.

Congratulations now you can use the realrashid/sweet-alert package with Livewire 🎉 🎉

Now let’s install the Livewire then we go further 😎 .

composer require livewire/livewire

Include the JavaScript (on every page that will be using Livewire).

In our case this is our master layout there we included @include('sweetalert::alert')

...
    @livewireStyles
</head>
<body>
    ...    @include('sweetalert::alert')
    @livewireScripts
    // Don't forget the stack tag!
    @stack('scripts')
</body>
</html>

Now let’s create a Livewire ConfirmAlert component.

php artisan make:livewire ConfirmAlert

Running this above command will generate the following two files:

// app/Http/Livewire/ConfirmAlert.php
// resources/views/livewire/confirm-alert.blade.php

Let’s first start with app/Http/Livewire/ConfirmAlert.php

<?phpnamespace App\Http\Livewire;use Livewire\Component;
use App\Contact;class ConfirmDelete extends Component
{
    /**
     * Contact Id
     *
     * @var [inf]
     */
    public $contactId;    /**
     * Render the confirm-alert button
     * @return view
     * @author Rashid Ali <realrashid05@gmail.com>
     */
    public function render()
    {
        return view('livewire.confirm-delete');
    }    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     * @author Rashid Ali <realrashid05@gmail.com>
     */
    public function destroy($contactId)
    {
        Contact::find($contactId)->delete();
    }
}

Now Let’s edit the component view!

<!-- resources/views/livewire/confirm-alert.blade.php --><div>
    <button class="btn btn-danger" wire:click="$emit('triggerDelete',{{ $contactId }})">
        Delete
    </button>
</div>@push('scripts')
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        @this.on('triggerDelete', contactId => {
            Swal.fire({
                title: 'Are You Sure?',
                text: 'Conatct record will be deleted!',
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#aaa',
                confirmButtonText: 'Delete!'
            }).then((result) => {
         //if user clicks on delete
                if (result.value) {
             // calling destroy method to delete
                    @this.call('destroy',contactId)
             // success response
                    Swal.fire({title: 'Contact deleted successfully!', icon: 'success'});
                } else {
                    Swal.fire({
                        title: 'Operation Cancelled!',
                        icon: 'success'
                    });
                }
            });
        });
    })
</script>
@endpush

You did it 🎉

Now just load the button within your blade.
In my case it is resources/views/contacts/index.blade.php.

<table class="table table-striped">
    <thead>
        <tr>
            <td>....</td>
            <td colspan=2>Actions</td>
        </tr>
    </thead>
    <tbody>
        @foreach($contacts as $contact)
        <tr>
            <td>...</td>
            <td>
                <a href="...">Edit</a>
            </td>
            <td>
                @livewire('confirm-delete', ['contactId' => $contact->id])
            </td>
        </tr>
        @endforeach
    </tbody>
</table>

That’s it.

Thank you! 👍

How to use SweetAlert2 with Livewire

Written by Rashid Ali