Laravel Livewire Toastr Notifications Example

This article illustrates Laravel Livewire Toastr Notifications with the help of an example. The below example shows how to implement a Toastr notification alert using Laravel Livewire. Create Toaster notification with Livewire with Laravel 6, Laravel 7, Laravel 8, and Laravel 9 versions.

So, let’s follow the below steps:

Step 1: Install Laravel

Get the latest Laravel version application using the below command. Open your terminal OR command prompt and run the below command:

Step 2: Install Livewire

Install the livewire to Laravel application using the below command:

composer require livewire/livewire

Step 3: Create Component

Create the livewire component using their command. Run the below command to create select 2 components.

php artisan make:livewire notificationDemo

Now, create files on both paths:

app/Http/Livewire/NotificationDemo.php

resources/views/livewire/notification-demo.blade.php

Now, update both the files as below for our contact us form.

app/Http/Livewire/NotificationDemo.php

<?php
  
namespace App\Http\Livewire;
  
use Livewire\Component;
  
class NotificationDemo extends Component
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function render()
    {
        return view('livewire.notification-demo')->extends('layouts.app');
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function alertSuccess()
    {
        $this->dispatchBrowserEvent('alert', 
                ['type' => 'success',  'message' => 'User Created Successfully!']);
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function alertError()
    {
        $this->dispatchBrowserEvent('alert', 
                ['type' => 'error',  'message' => 'Something is Wrong!']);
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function alertInfo()
    {
        $this->dispatchBrowserEvent('alert', 
                ['type' => 'info',  'message' => 'Going Well!']);
    }
}

resources/views/livewire/notification-demo.blade.php

<?php
<div>

<h1>Laravel Livewire Notification Example </h1>

<button type="button" wire:click="alertSuccess" class="btn btn-success">Success Alert</button>

<button type="button" wire:click="alertError" class="btn btn-danger">Error Alert</button>

<button type="button" wire:click="alertInfo" class="btn btn-info">Info Alert</button>
?>

Step 4: Create Route

Create one route for calling example. Add new route to the web.php file as below:

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
 
use App\Http\Livewire\NotificationDemo;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
  
Route::get('notification', NotificationDemo::class);

Step 5: Create View File

Create blade file for call form route. In this file, will use @livewireStyles, @livewireScripts. Let’s add it.

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Livewire Example</title>
    @livewireStyles
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
</head>
<body>
    
<div class="container">
    @yield('content')
</div>
    
</body>
  
@livewireScripts
  
<script>
window.addEventListener('alert', event => { 
             toastr[event.detail.type](event.detail.message, 
             event.detail.title ?? ''), toastr.options = {
                    "closeButton": true,
                    "progressBar": true,
                }
            });
</script>
  
</html>

Run the below command

php artisan serve

Output

Laravel livewire notification example