Laravel 9 Livewire Toastr Notification Alert

Laravel provides web artisans new means and ways to present their web apps like never before. It’s a web app framework that has highest intelligently crafted beautiful syntax and expressiveness. It liberates the developers from worries while writing their code due to its sheer beauty. In this tutorial we are using Laravel a baseline app.

Livewire enjoys edge over Vue and React. No doubt they are the best frameworks but the complexity they add to the projects is way beyond debugging once we encounter the error in our code. It’s where Livewire stands apart, it beauties the whole scenario by putting devs on ease.

In this web app example we are going to use Larvel and Livewire for creating a toastr notification alert for our new project. We have explained and given live examples. At then end of the tutorial you can run the code in IDE and see the results.

#1 Let’s create a new Laravel project

Use this command in your Linux or whatever code processor you are using to create a new laravel 9 project.

composer create-project --prefer-dist laravel/laravel livewire toastr

#2 Install Livewire

Use this command and insatll Livewire where we have to mention which composer is required

composer require livewire/livewire

#3 Let’s create the component

Now we will use this command in our terminal and create the component

php artisan make:livewire alert

You can see two distinct files have been created one is our notification demo and the other is views in our blade.php template.

app/Http/Livewire/alert.php

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

Now the following piece of code will be used to update both of them. The three events are also written to echo the results

app/Http/Livewire/alert.php

<?php
  
namespace App\Http\Livewire;
  
use Livewire\Component;
  
class alert extends Component
{
    /**
     * Write code to extend the method
     *
     * @return response()
     */
    public function render()
    {
        return view('livewire.alert')->extends('layouts.app');
    }
  
    /**
     * Now changing code to instruct changes 
     *
     * @return response()
     */
    public function alertSuccess()
    {
        $this->dispatchBrowserEvent('alert', 
                ['type' => 'success',  'message' => 'Success!']);
    }
  
    /**
     * Now changing code to instruct changes 
     *
     * @return response()
     */
    public function alertError()
    {
        $this->dispatchBrowserEvent('alert', 
                ['type' => 'error',  'message' => 'Failed Something Went Wrong']);
    }
  
    /**
     * Now changing code to instruct changes 
     *
     * @return response()
     */
    public function alertInfo()
    {
        $this->dispatchBrowserEvent('alert', 
                ['type' => 'info',  'message' => 'Progress is Great']);
    }
}

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

<div>
    <h1>Laravel 9 Livewire Toastr Notification - Laramatic</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>
</div>

#4 Adding Router to Our Laravel 9 Livewire Toastr Alert web.php File

Now we have to add the router to web.php file to make function calls. 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  We have to register our router here 
| for our web app which will load by the RouteServiceProvider inside a group containing "Web" middleware group
|
*/
  
Route::get('notification', NotificationDemo::class);

#5 Now Let’s Create Our View File

Next we have to add a blade file to make the route calls for our contact. There we will make use of Livewite styles and Scripts as shown here in the code section:

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 Livewire Toastr Notification - Laramatic</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>

#6 Let’s Test Our Laravel 9 Livewire Notification Alert

We need to run this command to start our server and check notification on local host.

php artisan serve

Check the URL on local host:

localhost:7000/alert