Laravel 11 Livewire Toastr Notification

Websolutionstuff | May-31-2024 | Categories : Laravel

Hello, laravel web developers! In this article, we'll see how to add toastr notification in livewire laravel 11. Here, we'll use toastr.js to display notifications in laravel 11. toastr.js to display a success message, warning message, and error message with the help of a session in laravel 11.

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.

Laravel 11 Livewire Toastr Notification

laravel 11 livewire toastr notification

 

Step 1: Install Laravel 11

In this step, we'll install laravel 11 using the following command.

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

 

 

Step 2: Install Livewire

Next, we'll install laravel livewire using the following composer command.

composer require livewire/livewire

 

Step 3: Create Component

Then, we'll 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 11 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

Now, we will create a blade file and include @livewireStyles, and @livewireScripts.

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>how to add toastr notification in livewire laravel 11 - 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 Upload Multiple Image in Laravel 8
How to Upload Multiple Image i...

In this example we will see how to upload multiple image in laravel 8. here, we wil see tutorial of multiple image uploa...

Read More

Sep-17-2021

Drag and Drop File Upload Using Dropzone js in Laravel 8
Drag and Drop File Upload Usin...

This article will show drag and drop file upload using dropzone js in laravel 8. DropzoneJS is an open-source library th...

Read More

Oct-20-2020

Angular 15: Unleashing Modern Web Development
Angular 15: Unleashing Modern...

Angular 15 is the latest iteration of one of the most popular JavaScript frameworks for building dynamic web application...

Read More

Jun-05-2023

Laravel tips: DB Models and Eloquent - 2023
Laravel tips: DB Models and El...

Welcome to the fourth installment of our "Laravel Tips: DB Models and Eloquent" series. In this article, we co...

Read More

Oct-18-2023