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
Download: Laravel_Livewire_AlertComponent.zip
Any Question / Leave a comment ?
--- Thank you for your attention! ---