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







Follow us
facebooklogo github instagram twitter

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock or some other adblocking software which is preventing the page from fully loading.

We need money to operate the site, and almost all of it comes from our online advertising.

Please add websolutionstuff to your ad blocking whitelist or disable your adblocking software.

×