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

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>
Enter fullscreen mode Exit fullscreen mode

add-post.blade.php

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

AddPost.php

 public function save()
  {
    // validation 
    ...
    // save
    ....

    // show alert
    $this->dispatchBrowserEvent(
    '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)

Collapse
 
wcaaan profile image
Wcan

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

Collapse
 
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

dispatch($this);

Collapse
 
zaratedev profile image
Jonathan Zarate

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

Collapse
 
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

Collapse
 
dariusdauskurdis profile image
Darius Dauskurdis

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