What we will achieve
Note
This article assumes that you know the basics knowledge of the Laravel and Livewire package.
Why
We are going to show Alert messages in Laravel Livewire. If you have little work experience with Livewire you may feel that showing alerts are not easy in the Livewire approach. Also, Laravel notify and Laravel Sweetlert not working. Because these libs are request based while Livewire does not use the traditional Laravel request cycle.
Approach
Here I up came with different and easy alerts setup. For alerts, I'm using a javascript toastr library.
Code
Assuming you have a base layout added necessary javascript and CSS. In the base layout, we have to catch an event dispatched by Livewire, See the script section.
app.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Livewire Alert</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">
@livewireStyles
</head>
<body>
@livewire('addPost') // adding livewire component
@livewireScripts
<script
src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/lates
t/toastr.min.js"></script>
<script>
window.addEventListener('alert', event => {
toastr[event.detail.type](event.detail.message,
event.detail.title ?? '') toastr.options = {
"closeButton": true,
"progressBar": true,
}
})
</script>
</body>
</html>
add-post.blade.php
// other form element
...
<button type="button" wire:click="save">Save</button>
AddPost.php
public function save()
{
// validation
...
// save
....
// show alert
$this->dispatchBrowserEvent(
'alert', ['type' => 'success', 'message' => 'Saved']);
}
Summing up
So, we have addPost component, in the blade file on save or on any button click method we dispatch a browser event from the Livewire PHP component,
We are catching this component in Javascript from base Layout and showing toaster using toastr library you can use other libraries like SweetAlert
That's it! Thanks for reading. If you have a question or need source code for the above tutorial please comment below.
Cover Image by Colin Watts on Unsplash
Top comments (5)
how can i move $this->dispatchBrowserEvent function a static helper ? if i move $this->dispatchBrowserEvent to helper it says. "using this when not in object context" also self::dispatchBrowserEvent does not work, it only works if i use it directly in store function in livewire component
You need to pass $this as parameter.
For example helper will looks like below
public function dispatch($content)
{
$content->dispatchBrowserEvent('success', ['message' => 'success']);
}
and then call in Livewire
dispatch($this);
Great job! mmm instead of toastr. I want to use a tailwind css alert. How can I do it?
I have't worked with tailwind, but I'm sure there will be the same way using alphine.js with tailwind.
Eg: Make tailwind alert and by deafult hide it, on dispatch show this alert
Thank you for your tutorial! Just one thing... I think need to add jQuery library to make it work.