Download the PHP package sweetalert2/laravel without Composer

Official SweetAlert2 integration for Laravel framework

Demos: Inertia + React | Livewire

Installation

Include the SweetAlert2 template in your layout file (usually resources/views/layouts/app.blade.php):

Usage

Laravel Controllers, Middleware, Views etc.

You can now call Swal::fire() or any of the available helper methods anywhere in your Laravel application (controllers, middleware, etc.) to show a SweetAlert2 alert:

The full list of options can be found in the SweetAlert2 documentation.

Helpers

Available Laravel helper methods:

Using JavaScript Callbacks

You can use JavaScript callbacks (like didOpen, willClose, etc.) by passing them as strings:

For more details on using callbacks, see FAQ #4.

Livewire Components

You can now call $this->swalFire or any of the available helper methods in your Livewire component to show realtime popups and toasts:

LivewireExample.php

The full list of options can be found in the SweetAlert2 documentation.

livewire-example.blade.php

Helpers

Available Livewire helper methods:

Using JavaScript Callbacks in Livewire

Just like in Laravel controllers, you can use JavaScript callbacks in Livewire components:

Inertia.js

You can use Swal::fire() or any of the available helper methods in your Inertia.js controllers to show popups after navigation:

Setup

First, add the SweetAlert2 flash data to your HandleInertiaRequests middleware:

Then include the SweetAlert2 template in your Inertia app layout (usually resources/views/app.blade.php or similar):

Usage

InertiaController.php

The full list of options can be found in the SweetAlert2 documentation.

Helpers

Available Inertia helper methods (same as Laravel helpers):

FAQ

1. How is this different to the realrashid/sweet-alert package?

The realrashid/sweet-alert package is too opinionated and too complex: facade, midddleware, adding vendor files, whatnot 🤯. And all that with 0 tests.

This package is simple, straightforward, and unopinionated. Its API is aimed to be as close as possible to the original sweetalert2.

It simply provides a way to use SweetAlert2 in your Laravel, Livewire, or Inertia.js application without touching JS or CSS files.

2. How does it work?

Depending on whether you use the Swal class or the WithSweetAlert trait, within either a Laravel only, Livewire, or Inertia.js context, the behaviour is slightly different.

Laravel controllers, middleware, views etc

1. The Swal::fire() method will pass the options to the session using session()->put().
2. The blade partial template will check if there is any session data and will render the SweetAlert2 popup, removing the data with session()->pull() after displaying it.

Livewire components

Realtime

1. The $this->swalFire() method will dispatch a Livewire event with the options to the browser window within the current request.
2. The blade partial template will listen for the Livewire event and will render the SweetAlert2 popup.

This works on the first request and subsequent Livewire update requests.

First request or after redirect

1. The Swal::fire() method will pass the options to the session using session()->put().
2. The blade partial template will show a popup on the initial page render, removing the data with session()->pull() after displaying it.

This works across multiple requests (including lazy-loaded components) until the alert is displayed.

This is ideal for showing messages after redirecting the user from a Livewire component, for example if they lack permissions to view a page:

Inertia.js

1. The Swal::fire() method will pass the options to the session using session()->put().
2. The HandleInertiaRequests middleware shares the session data with Inertia via shared props, removing it with session()->pull().
3. The blade partial template listens for Inertia navigation events and renders the SweetAlert2 popup.

This works after Inertia page navigations (redirects, visits, etc.).

3. How is the SweetAlert2 JavaScript library loaded?

This package uses a smart loading strategy for the SweetAlert2 library:

1. Check for existing SweetAlert2: If window.Swal is already available, it will use the existing import.

2. Dynamic CDN loading: If SweetAlert2 is not loaded, it will dynamically import it from the official CDN (https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.esm.all.min.js).

4. What are the limitations?

SweetAlert2 is a JavaScript package and some of its options are JS callbacks. While you can pass JavaScript callback functions as strings in the Swal::fire() or $this->swalFire() methods, keep in mind:

1. Callbacks must be passed as strings: Write your JavaScript function as a string. For example:

2. Supported callback options: The following callback options are supported and will be rendered as JavaScript functions:

   • didOpen
   • didClose
   • didDestroy
   • willOpen
   • willClose
   • didRender
   • preDeny
   • preConfirm
   • inputValidator
   • inputOptions

3. Callback limitations:

   • You cannot use PHP variables directly in callback strings (use JavaScript variables or values from the alert instead)
   • Complex logic should be kept in JavaScript files and called from the callbacks
   • For advanced use cases, consider using the SweetAlert2 API directly in JavaScript

4. Security considerations:

   • Callback strings are executed as JavaScript in the browser
   • ⚠️ CRITICAL: Only pass callback strings from trusted sources (your PHP backend code)
   • ⚠️ NEVER pass user input directly as callback strings to prevent XSS (Cross-Site Scripting) vulnerabilities
   • The package includes built-in XSS protection that escapes dangerous patterns in callbacks, but this is a defense-in-depth measure
   • Always validate and sanitize user input before including it in any SweetAlert2 options
   • If you need to include dynamic user-provided data, use regular options (like title, text, html) which are safely JSON-encoded

   • Example of unsafe usage (NEVER do this):

   • Example of safe usage:

Example: Toast with Timer Control

Publishing to Packagist

This package is published to Packagist automatically via a GitHub webhook. When a new release is tagged on GitHub, Packagist is notified and updates the package index automatically.