Laravel SweetAlert2

What it solves

Showing a popup after a controller redirects, or asking for confirmation before a delete button runs, usually means writing your own JavaScript and passing data through the session by hand.

Queue popups from a controller and they show on the next page, even after more than one redirect. A data-swal-confirm attribute puts a confirm dialog in front of any link, button or form, and Livewire and Alpine can show popups without a page load.

• Flash one or several popups from a controller; they show in order on the next page
• Popups survive more than one redirect
• data-swal-confirm on links, buttons, forms, wire:click and wire:submit
• $this->swal() in Livewire and a sweetalert2 event in Alpine, with wire:navigate support
• Titles rendered as text and button labels escaped
• SweetAlert2 11 from a pinned jsDelivr URL with SRI, and Laravel's CSP nonce on every script

Install

Requires PHP 8.3+ and Laravel 12 and 13.

composer require amjadiqbal/laravel-sweetalert2

Usage

use AmjadIqbal\SweetAlert2\Facades\SweetAlert2;

// In a controller
SweetAlert2::success('Invoice sent', 'We emailed it to the client.');

return redirect()->route('invoices.index');

// Once, in your layout: <x-sweetalert2 />

Setup

Add the component once to your layout, just before </body> (or use @sweetalert2). Publishing the config is optional.

1. 1 composer require amjadiqbal/laravel-sweetalert2
2. 2 Add <x-sweetalert2 /> to your layout.
3. 3 php artisan vendor:publish --tag=sweetalert2-config

From a controller

Every method returns a fluent builder and changes are saved automatically. Popups queued in one request show in order on the next page that renders <x-sweetalert2 />, and only once.

SweetAlert2::success('Saved', 'Your profile is up to date.');
SweetAlert2::toast('Copied to clipboard');

SweetAlert2::success('Order placed', 'We will email you a receipt.')
    ->timer(4000)
    ->position('top')
    ->confirmButton('Great!');

swal('Saved', 'Your profile is up to date.', 'success');

Confirm before an action

Add data-swal-confirm to a link, a button or a form. The action only runs if the user confirms. data-swal-text, data-swal-icon, data-swal-confirm-button and data-swal-cancel-button change the dialog.

<form method="POST" action="{{ route('posts.destroy', $post) }}" data-swal-confirm="Delete this post?"
      data-swal-text="This cannot be undone." data-swal-confirm-button="Yes, delete it">
    @csrf @method('DELETE')
    <button>Delete</button>
</form>

<button wire:click="archive" data-swal-confirm="Archive this project?">Archive</button>

Livewire and Alpine

Use the SweetAlerts trait in a Livewire component to show a popup without a page load. If the action redirects, use the facade instead and the popup shows on the next page.

use AmjadIqbal\SweetAlert2\Livewire\SweetAlerts;

// in the component
$this->swalToast('Profile saved');

<button x-data @click="$dispatch('sweetalert2', { title: 'Hello', icon: 'info' })">Say hello</button>

Security notes

• title, button labels and footer are escaped.
• html() and raw() pass values through untouched, so never put user input in them.
• Options sent from the browser go to SweetAlert2 as they are, so do not put user input in html.
• With Vite::useCspNonce() every script tag gets the nonce. The SweetAlert2 all build injects its CSS in a <style> tag, so a strict style-src needs 'unsafe-inline' or a Vite build.

Support

Found a bug or want a feature? Open an issue on GitHub. For help adding it to your own project, use the quote form above.