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.
In this step, we will install laravel 9 using the following command.
composer create-project --prefer-dist laravel/laravel livewire_toastr_notificationIn this step, we will install laravel livewire using the following composer command.
composer require livewire/livewireNow, we will create a livewire notification component for toastr notifications.
php artisan make:livewire toastrNotificationapp/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>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);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:
- Read Also: Laravel 9 Livewire Pagination Example
- Read Also: Custom Toastr Notification In Laravel 9
- Read Also: Laravel 9 Toastr Notifications Example
- Read Also: Vue Js Sweetalert Modal Notification Tutorial
