DEV Community

Cover image for Peasy way to Show Alerts in Laravel Livewire
Abrar Ahmad
Abrar Ahmad

Posted on


Peasy way to Show Alerts in Laravel Livewire

What we will achieve


This article assumes that you know the basics knowledge of the Laravel and Livewire package.


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.


Here I up came with different and easy alerts setup. For alerts, I'm using a javascript toastr library.


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.


<!DOCTYPE html>
   <title>Laravel Livewire Alert</title>
   <link href="" rel="stylesheet">
 @livewire('addPost')  // adding livewire component 


window.addEventListener('alert', event => { 
             event.detail.title ?? '') toastr.options = {
                    "closeButton": true,
                    "progressBar": true,

Enter fullscreen mode Exit fullscreen mode


 // other form element 
 <button type="button" wire:click="save">Save</button>
Enter fullscreen mode Exit fullscreen mode


 public function save()
    // validation 
    // save

    // show alert
    'alert', ['type' => 'success',  'message' => 'Saved']);
Enter fullscreen mode Exit fullscreen mode

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)

wcaaan profile image

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

abrardev99 profile image
Abrar Ahmad

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


zaratedev profile image
Jonathan Zarate

Great job! mmm instead of toastr. I want to use a tailwind css alert. How can I do it?

abrardev99 profile image
Abrar Ahmad

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

dariusdauskurdis profile image
Darius Dauskurdis

Thank you for your tutorial! Just one thing... I think need to add jQuery library to make it work.

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!