Livewire Alert

Ensure your environment meets the following minimum requirements:

• PHP: 8.1 or higher
• Laravel: 10.x or higher
• Livewire: 3.x or 4.x
• Composer

If you are using Filament, you need to register SweetAlert2 as a Filament asset in your AppServiceProvider to ensure it is loaded correctly within the Filament admin panel.

use Filament\Support\Facades\FilamentAsset;
use Illuminate\Support\Facades\Vite;
use Filament\Support\Assets\Js;

public function boot()
{
    FilamentAsset::register([
        Js::make('sweetalert2', Vite::asset('resources/js/sweetalert2.js')),
        // Or via CDN:
        // Js::make('sweetalert2', 'https://cdn.jsdelivr.net/npm/sweetalert2@11'),
    ]);
}

To use Livewire Alert in your Laravel project, follow these steps:

1. Install the package via Composer:

   composer require jantinnerezo/livewire-alert

2. Publish the configuration (optional):

   php artisan vendor:publish --tag=livewire-alert:config

3. Install SweetAlert2: You must have SweetAlert2 available in your frontend. You can install it via npm/yarn or use a CDN.

Via npm/yarn:

npm install sweetalert2
# or
yarn add sweetalert2

Then, import it in your resources/js/app.js to make it globally available:

import Swal from 'sweetalert2'

window.Swal = Swal

Via CDN: Include this script before the closing </body> tag:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

You can publish the package configuration file to your application's config directory using the Artisan command. This allows you to customize the alert settings. Use the livewire-alert:config tag when publishing.

php artisan vendor:publish --tag=livewire-alert:config

Livewire Alert provides a fluent, chainable API via the LivewireAlert facade. You can trigger different types of notifications (like success, error, warning, etc.) directly from your Livewire component methods.

use Jantinnerezo\LivewireAlert\Facades\LivewireAlert;

public function save()
{
    LivewireAlert::title('Changes saved!')
        ->success()
        ->show();
}

You can attach custom actions to an alert that trigger when a user interacts with it. These actions are dispatched as Livewire events. Use the following methods to define these behaviors:

• onConfirm(string $action, mixed $data = null): Triggers when the user confirms the alert.
• onDeny(string $action, mixed $data = null): Triggers when the user selects the deny option.
• onDismiss(string $action, mixed $data = null): Triggers when the alert is dismissed (e.g., clicking outside or closing).

The $action string is the name of the event that will be dispatched, and $data is an optional payload sent with the event.

$this->alert()
    ->question('Are you sure?')
    ->onConfirm('delete-user', ['id' => 1])
    ->onDeny('cancel-delete')
    ->show();

You can include an image in your alert using the following methods:

• imageUrl(string $url): Sets the URL of the image.
• imageWidth(int $width): Sets the width of the image.
• imageHeight(int $height): Sets the height of the image.
• imageAlt(string $alt): Sets the alt text for the image.

The LivewireAlert class is bound to the Laravel service container. You can resolve it using either the class name Jantinnerezo\LivewireAlert\LivewireAlert or the alias livewire-alert. The instance is automatically injected with the current Livewire component.

// Resolving via class name
$livewireAlert = app(\Jantinnerezo\LivewireAlert\LivewireAlert::class);

// Resolving via alias
$livewireAlert = app('livewire-alert');