This article illustrates Laravel Livewire Toastr Notifications with the help of an example. The below example shows how to implement a Toastr notification alert using Laravel Livewire. Create Toaster notification with Livewire with Laravel 6, Laravel 7, Laravel 8, and Laravel 9 versions.
So, let’s follow the below steps:
Step 1: Install Laravel
Get the latest Laravel version application using the below command. Open your terminal OR command prompt and run the below command:
Step 2: Install Livewire
Install the livewire to Laravel application using the below command:
composer require livewire/livewire
Step 3: Create Component
Create the livewire component using their command. Run the below command to create select 2 components.
php artisan make:livewire notificationDemo
Now, create files on both paths:
app/Http/Livewire/NotificationDemo.php
resources/views/livewire/notification-demo.blade.php
Now, update both the files as below for our contact us form.
app/Http/Livewire/NotificationDemo.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.notification-demo')->extends('layouts.app'); } /** * Write code on Method * * @return response() */ public function alertSuccess() { $this->dispatchBrowserEvent('alert', ['type' => 'success', 'message' => 'User Created Successfully!']); } /** * Write code on Method * * @return response() */ public function alertError() { $this->dispatchBrowserEvent('alert', ['type' => 'error', 'message' => 'Something is Wrong!']); } /** * Write code on Method * * @return response() */ public function alertInfo() { $this->dispatchBrowserEvent('alert', ['type' => 'info', 'message' => 'Going Well!']); } }
resources/views/livewire/notification-demo.blade.php
<?php <div> <h1>Laravel Livewire Notification Example </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> ?>
Step 4: Create Route
Create one route for calling example. Add new route to the web.php file as below:
routes/web.php
<?php use Illuminate\Support\Facades\Route; use App\Http\Livewire\NotificationDemo; /* |-------------------------------------------------------------------------- | 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('notification', NotificationDemo::class);
Step 5: Create View File
Create blade file for call form route. In this file, will use @livewireStyles, @livewireScripts. Let’s add it.
resources/views/layouts/app.blade.php
<!DOCTYPE html> <html> <head> <title>Laravel Livewire Example</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>
Run the below command
php artisan serve
Output