Laravel 9 Livewire Toastr Notification

Websolutionstuff | Nov-28-2022 | Categories : Laravel PHP

In this article, we will see laravel 9 livewire toastr notification. Here, we will learn how to create toastr notifications using livewire in laravel 7, laravel 8, and laravel 9. We will use toastr.js to display a success message, warning message, and error message with the help of a session in laravel 9. So, you can see how to add toastr notification in laravel 9 using livewire.

toastr is a Javascript library for Gnome / Growl type non-blocking notifications. jQuery is required. Also, you can customize toastr notifications like a close button, timing of notification showing, and progress bar.

So, let's see livewire toastr notifications, custom toastr notifications in laravel 9 with livewire.

Step 1: Install Laravel 9

In this step, we will install laravel 9 using the following command.

composer create-project --prefer-dist laravel/laravel livewire_toastr_notification

 

 

Step 2: Install Livewire

In this step, we will install laravel livewire using the following composer command.

composer require livewire/livewire

 

Step 3: Create Component

Now, we will create a livewire notification component for toastr notifications.

php artisan make:livewire toastrNotification

app/Http/Livewire/toastrNotification.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.toastr-notification')->extends('layouts.app');
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function alertSuccess()
    {
        $this->dispatchBrowserEvent('alert', 
                ['type' => 'success',  'message' => 'This is success notification!']);
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function alertError()
    {
        $this->dispatchBrowserEvent('alert', 
                ['type' => 'error',  'message' => 'Something wants Wrong!']);
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function alertInfo()
    {
        $this->dispatchBrowserEvent('alert', 
                ['type' => 'info',  'message' => 'This is info notification!']);
    }
}

 

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

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

 

 

 Step 4: Create Route

In this step, we will add routes to the web.php file.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
 
use App\Http\Livewire\toastrNotification;
  
/*
|--------------------------------------------------------------------------
| 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('toastr-notification', toastrNotification::class);

 

Step 5: Create View File

In this step, we will create a blade file and include @livewireStyles, and @livewireScripts.

resources/views/layouts/app.blade.php

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

 


You might also like:

Recommended Post
Featured Post
How To Validate Password And Confirm Password Using JQuery
How To Validate Password And C...

In this article, we see how to validate password and confirm password using jQuery. Validation is a basic and important...

Read More

Sep-02-2020

Laravel 9 Group By Query Example
Laravel 9 Group By Query Examp...

In this article, we will see laravel 9 group by query example. how to use group by in laravel 9. As you might expec...

Read More

Mar-29-2022

How To Get Last Record In Laravel 8
How To Get Last Record In Lara...

In this example, we will see how to get the last record in laravel 8. You can simply get the last record using laravel 8...

Read More

Jan-26-2022

How To Generate QRcode In Laravel
How To Generate QRcode In Lara...

In this example, I will give information about how to generate QR code in laravel. As per the current trend, many w...

Read More

Jun-01-2020