How to Add Toastr Notification in Laravel 11?

Toastr.js is a JavaScript library which is used to display notifications or alerts with different colors, icons based on the type of notification on a webpage. Toastr.js helps to improve the user experience with display notification or message. Integrate Toastr.js in Laravel application is not a very difficult task.

You can do this by following the next steps.

Step 1: Install Laravel (if you already install Laravel 11, you can skip step 1) by using the below command.

composer create-project laravel/laravel example-app

Here, you can replace the example-app name with your project name like: blog, ecommerce, agency or any name.

Step 2: Now, you need to create a notification blade file and define all messages. You also need to import CDN js and CSS for JQuery and Toastr JS. So, let’s create a blade file in the following path-

resources/views/toastr.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta tags, CSS links -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
</head>
<body>
    <!-- Your app content here -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

    <script>
        @if(session('success'))
            toastr.success("{{ session('success') }}");
        @elseif(session('error'))
            toastr.error("{{ session('error') }}");
        @elseif(session('info'))
            toastr.info("{{ session('info') }}");
        @elseif(session('warning'))
            toastr.warning("{{ session('warning') }}");
        @endif

        toastr.options = {
            "closeButton": true,
            "progressBar": true,
            "positionClass": "toast-top-right",
            "timeOut": "5000",
        };
    </script>
</body>
</html>

Step 3 Create Route: You need to create some route for Toastr notification. You can create this in the following path- routes/web.php

&lt?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\NotificationController;

Route::get('notification', [NotificationController::class, 'index']);
Route::get('notification/{type}', [NotificationController::class, 'notification'])->name("notification");

Step 4 Create Controller: You need to create a notification controller and update it by following the code below.

&lt?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class NotificationController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index()
    {
        return view('demo');
    }

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function notification($type)
    {
        switch ($type) {
            case 'success':
                return back()->with("success", "User created successfully.");
                break;

            case 'info':
                return back()->with("info", "User updated successfully.");
                break;

            case 'warning':
                return back()->with("warning", "User can not access page.");
                break;

            case 'error':
                return back()->with("error", "This is testing error.");
                break;
            
            default:
                // code...
                break;
        }
    }
}

Step 5 Test the notification: Now, all you need to do is done. Use the below command and check if everything is working well or not.