T echnojs
Already have an account?
login Login

Or,

Don't have an account?
group_add Register

Showing suggestions...

close
cookie
Cookies Consent

This site uses cookies to offer you a better browsing experience.

Laravel Livewire: Alerts Component

Craft dynamic alerts component in the Laravel Livewire application with custom flash messages using session and browser dispatch event.

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');
}

Source Code

by
question_answer Comments
bar_chart Views
people_alt Contributors
category Category workspaces Group
public Visibility
monetization_on Monetisation
checklist Authorization
save Created
today Updated

Any Question / Leave a comment ?
--- Thank you for your attention! ---

Related Posts