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 Create Login and Register in Node.js
How to Create Login and Regist...

As I embarked on my journey to develop a powerful web application, I realized the importance of a robust user authentica...

Read More

Oct-02-2023

Multi Step Form Example In Laravel
Multi Step Form Example In Lar...

Today in this post we will see multi step form example in laravel, here we will create laravel multi step form example.&...

Read More

Jul-21-2021

How To Setup And Configuration Angular 15
How To Setup And Configuration...

Setting up and configuring Angular 15, the latest version of the popular JavaScript framework, is a crucial step in star...

Read More

Jun-07-2023

Change Date Format Using Carbon In Laravel
Change Date Format Using Carbo...

In this article, we will see a change date format using carbon in laravel. Many times we have requirements to chang...

Read More

Dec-15-2020