Laravel Livewire: Alerts Component

Before creating alert notifications, we assume you have Laravel, Livewire v3.x, and Tailwind CSS installed.

Alerts Component

This component is a reusable and flexible notification in the form of a blade component or a livewire component which displays various types of messages such as success, error, warning, and info.

Alert.blade.php

<div class="alert" :class="{'success':'alert-success', 'error':'alert-danger', 'warning':'alert-warning', 'info':'alert-info'}[(alert.type ?? 'info')]"
    x-data="{ open:false, alert:{}}" x-show="open" x-cloak
    @alert.window="open=true; setTimeout(() => open=false, 5000); alert=$event.detail[0];"
    x-transition:enter="animate-alert-show"
    x-transition:leave="animate-alert-hide"
>
    <div class="alert-wrapper">
        <strong class="alert-title" x-html="alert.title"></strong>
        <p class="alert-message" x-html="alert.message"></p>
    </div>
    <i class="alert-close fa-solid fa-xmark" @click="open=false"></i>
</div>

<script>
    document.addEventListener('livewire:initialized', () => {
        let obj =  @json(session('alert') ?? []);
        if (Object.keys(obj).length) {
            Livewire.dispatch('alert', [ obj ]);
        }
    })
</script>

Dynamic class binding (:class="...") for the appearance of alert type.
Listened to the Livewire dispatch event (@alert.window) in the browser.
Capturing the value of Livewire event ($event.detail[0]).
Auto hiding the alert notification (setTimeout(...))
Catch session & dispatching with alert (Livewire.dispatch(...))

Usage

Here is an example of dispatch event and session flash from any Livewire component.

public function save()
{
    if(true) {
        return $this->dispatch('alert', [
            'title' => 'Alert!',
            'message' => 'This is error message.',
            'type' => 'error'
        ]);
    }
    
    session()->flash('alert', [
        'title' => 'Alert!',
        'message' => 'This is success message.',
        'type' => 'success'
    ]);
    
    return $this->redirect('/dashboard');
}