In any modern web application, providing real-time and interactive feedback to users is crucial for a smooth and enjoyable user experience. One popular way to achieve this is by using Toastr notifications, which offer eye-catching and non-intrusive alert messages that seamlessly blend into the user interface.

In this article, we'll explore how to integrate Toastr notifications in a Laravel 10 Livewire project. By combining the power of Laravel's server-side Livewire framework with the dynamic frontend of Toastr, we can effortlessly display informative notifications to users without the need for page reloads.

Throughout this guide, we'll take a step-by-step approach to setting up Toastr notifications in Laravel 10 Livewire. Whether you want to show success messages, error alerts, or any custom notifications, we'll cover it all. You'll learn how to display Toastr notifications in real-time, keeping your users informed and engaged as they interact with your application.

By the end of this tutorial, you'll have the tools to create responsive and visually appealing Toastr notifications in your Laravel 10 Livewire project. Elevate your application's user feedback and leave a lasting impression on your users with these dynamic notifications.

So, if you're ready to enhance the user experience and provide real-time feedback through Toastr notifications, let's dive into the world of Laravel 10 Livewire together.

 

Create a new Laravel 10 project using Composer by running the following command in your terminal.

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

 

Install Livewire using Composer.

composer require livewire/livewire

 

Generate a new Livewire component using the Artisan command.

php artisan make:livewire toastrNotification

Open the newly created ToastrNotification.php file located at app/Http/Livewire. Update the render() method with the following code.

app/Http/Livewire/ToastrNotification.php

<?php
  
namespace App\Http\Livewire;
  
use Livewire\Component;
  
class ToastrNotification 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>Toastr Notification In Laravel 10 Livewire Example - Techsolutionstuff</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>How to Display Toastr Notification in Laravel 10 Livewire - Techsolutionstuff</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>

 

Start the Laravel development server by running the command.

php artisan serve

Open your browser and visit local URL. Click the "Success Alert" button, and you should see a success notification from Toastr.

Congratulations! You have successfully integrated Toastr notifications in your Laravel 10 Livewire project. Now, you can provide real-time and visually appealing feedback to your users, enhancing their experience with dynamic notifications.

 

---

You might also like:

• Read Also: Laravel Firebase Push Notification
• Read Also: Laravel 8 Toastr Notifications Example
• Read Also: Laravel 10 Livewire CRUD Operation Example
• Read Also: Laravel 10 Livewire CRUD With Jetstream And Tailwind CSS