Laravel Livewire Toastr Notifications Example

Laravel Livewire Toastr Notifications Example

by

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