Laravel 13 – Display Real-Time Notifications with Toastr
Laravel 13 – Display Real-Time Notifications with Toastr
In this tutorial, we will learn how to integrate Toastr notifications in Laravel 13 and display success, error, info, and warning messages using routes, a controller, and Blade layout for clear, instant user feedback.
Quick Overview
This guide walks you through adding Toastr notifications to a Laravel 13 application. You’ll start by creating a fresh Laravel 13 project and generating a ToastrController to handle success, error, info, and warning messages. Next, you’ll create a master.blade.php layout that brings together the page design, Toastr assets, notification cards, and session-based notification handling. After that, you’ll define the required routes in web.php to connect each notification type with its corresponding controller method. Finally, you’ll run the Laravel development server and test each notification directly from the page. Using Toastr gives users clear, immediate feedback without requiring separate alert pages or interrupting the current workflow, making common actions feel more responsive and user-friendly.
Step # 1 : Get Your Laravel 13 Project Ready.
We’ll begin by creating a new Laravel 13 application named toastr. The easiest way to get started is through Laravel’s Installer. It uses Composer behind the scenes, so make sure Composer is already installed and working on your system. If you haven’t installed the Laravel Installer yet, you can add it globally with.
composer global require laravel/installer
Once the Installer is ready, create the application by running.
laravel new toastr
A few prompts will appear while Laravel builds the application. Here’s what you should pick for this project.
- Starter Kit: Select No. We won’t be using a starter kit or pre-built authentication scaffolding.
- Frontend Stack: Select Blade so the project uses Laravel’s built-in Blade templating engine.
- Boost Features: Leave the default selection as it is and press Enter.
- Boost Integrations: Keep the default option and press Enter to continue.
- AI Agents: Select Amp when prompted for an AI agent. Laravel will add the necessary Amp configuration to the new application.
Once these options are selected, Laravel will create the project with No Starter Kit, Blade as the frontend stack, the default Boost settings, no Boost integrations, and Amp as the selected AI agent.
Step # 2 : Navigate to Your Laravel Project.
To start working with the newly created application, open your preferred terminal and move to the toastr project directory. You can use PowerShell, Command Prompt, Git Bash, or the integrated terminal available in VS Code. Run the following command.
cd toastr
Once inside the project directory, you can run Artisan, Composer, and other Laravel commands without issues.
Step # 3 : Generate the Toastr Controller.
Next, we need a controller to handle the different Toastr notifications we’ll trigger in the application. Create the controller using the following Artisan command.
php artisan make:controller ToastrController
This command will generate ToastrController.php inside the app/Http/Controllers directory. Open the newly created controller and add the following methods.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ToastrController extends Controller
{
// Show a success notification and return to the previous page
public function success()
{
return redirect()->back()->with('success', 'Operation was successful!');
}
// Show an error notification and return to the previous page
public function error()
{
return redirect()->back()->with('error', 'An error occurred!');
}
// Show an informational notification and return to the previous page
public function info()
{
return redirect()->back()->with('info', 'Here is some information!');
}
// Show a warning notification and return to the previous page
public function warning()
{
return redirect()->back()->with('warning', 'This is a warning!');
}
}
Each method adds its respective notification type to the session and then sends the user back to the previous page. Later, when the page is rendered, we’ll use these session values to determine which Toastr notification should appear. This gives us a simple way to provide immediate feedback for common actions, including successful operations, errors, informational messages, and warnings.
Step # 4 : Create the Master Blade Layout.
The main view for our notification examples will be handled through a single Blade file. This keeps the page structure, required assets, notification cards, and Toastr setup together instead of spreading them across different views. Inside the resources/views directory, create a new file named master.blade.php and add the following code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laravel 13 - Toastr Notifications</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Toastr CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
</head>
<body class="min-h-screen bg-[#0b1120] text-white">
<main class="flex min-h-screen items-center justify-center px-5 py-10">
<div class="w-full max-w-4xl">
<!-- Header -->
<div class="mb-8 text-center">
<div class="mb-4 flex items-center justify-center gap-2">
<span class="h-2 w-2 rounded-full bg-emerald-400"></span>
<span class="text-sm font-medium uppercase tracking-[0.2em] text-slate-400">
Laravel 13
</span>
</div>
<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl">
Code Shotcut - Toastr Notifications
</h1>
<p class="mx-auto mt-4 max-w-2xl text-base leading-7 text-slate-400">
Explore different notification types and see how Toastr works with Laravel.
</p>
</div>
<!-- Main Panel -->
<div class="overflow-hidden rounded-3xl border border-slate-800 bg-slate-900/80 shadow-2xl">
<!-- Panel Header -->
<div class="border-b border-slate-800 px-6 py-5 sm:px-8">
<h2 class="text-lg font-semibold">
Notification Examples
</h2>
<p class="mt-1 text-sm text-slate-500">
Select an option below to trigger a notification.
</p>
</div>
<!-- Notification Options -->
<div class="grid gap-px bg-slate-800 sm:grid-cols-2">
<!-- Success -->
<a href="{{ route('toastr.success') }}"
class="group bg-slate-900 p-7 transition hover:bg-emerald-500/[0.06]">
<div class="mb-5 flex items-center justify-between">
<div class="flex h-11 w-11 items-center justify-center rounded-xl bg-emerald-500/10 text-emerald-400">
✓
</div>
<span class="text-xs font-medium uppercase tracking-wider text-slate-600 group-hover:text-emerald-400">
Success
</span>
</div>
<h3 class="text-lg font-semibold text-slate-100">
Success Notification
</h3>
<p class="mt-2 text-sm leading-6 text-slate-500">
Display a message when an operation completes successfully.
</p>
<div class="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-emerald-400">
Show Notification
<span class="transition-transform group-hover:translate-x-1">→</span>
</div>
</a>
<!-- Error -->
<a href="{{ route('toastr.error') }}"
class="group bg-slate-900 p-7 transition hover:bg-red-500/[0.06]">
<div class="mb-5 flex items-center justify-between">
<div class="flex h-11 w-11 items-center justify-center rounded-xl bg-red-500/10 text-red-400">
×
</div>
<span class="text-xs font-medium uppercase tracking-wider text-slate-600 group-hover:text-red-400">
Error
</span>
</div>
<h3 class="text-lg font-semibold text-slate-100">
Error Notification
</h3>
<p class="mt-2 text-sm leading-6 text-slate-500">
Notify users when an operation fails or something goes wrong.
</p>
<div class="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-red-400">
Show Notification
<span class="transition-transform group-hover:translate-x-1">→</span>
</div>
</a>
<!-- Info -->
<a href="{{ route('toastr.info') }}"
class="group bg-slate-900 p-7 transition hover:bg-sky-500/[0.06]">
<div class="mb-5 flex items-center justify-between">
<div class="flex h-11 w-11 items-center justify-center rounded-xl bg-sky-500/10 text-sky-400">
i
</div>
<span class="text-xs font-medium uppercase tracking-wider text-slate-600 group-hover:text-sky-400">
Info
</span>
</div>
<h3 class="text-lg font-semibold text-slate-100">
Information Notification
</h3>
<p class="mt-2 text-sm leading-6 text-slate-500">
Provide users with useful information or additional details.
</p>
<div class="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-sky-400">
Show Notification
<span class="transition-transform group-hover:translate-x-1">→</span>
</div>
</a>
<!-- Warning -->
<a href="{{ route('toastr.warning') }}"
class="group bg-slate-900 p-7 transition hover:bg-amber-500/[0.06]">
<div class="mb-5 flex items-center justify-between">
<div class="flex h-11 w-11 items-center justify-center rounded-xl bg-amber-500/10 text-amber-400">
!
</div>
<span class="text-xs font-medium uppercase tracking-wider text-slate-600 group-hover:text-amber-400">
Warning
</span>
</div>
<h3 class="text-lg font-semibold text-slate-100">
Warning Notification
</h3>
<p class="mt-2 text-sm leading-6 text-slate-500">
Draw attention to actions or situations that need user awareness.
</p>
<div class="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-amber-400">
Show Notification
<span class="transition-transform group-hover:translate-x-1">→</span>
</div>
</a>
</div>
</div>
<!-- Footer -->
<div class="mt-6 text-center">
<p class="text-xs text-slate-600">
Built with Laravel 13 and Toastr.js
</p>
</div>
</div>
</main>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Toastr JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<!-- Session Notifications -->
<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
</script>
</body>
</html>
There are three important parts to notice in this layout. The notification cards use the controller routes we’ll define for each message type, the CDN files load Tailwind, jQuery, and Toastr, and the final script reads the session message returned by the controller. So whenever one of the notification links is clicked, Laravel stores the corresponding message in the session, redirects back to the page, and this layout displays that message through the matching Toastr method.
Step # 5 : Define Routes for Toastr Notifications.
Now we need to connect our controller methods with Laravel routes. Open the routes/web.php file and add the following routes.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ToastrController;
// Main page using the master layout
Route::get('/', function () {
return view('master');
});
// Define routes for different types of Toastr notifications
Route::get('/success', [ToastrController::class, 'success'])->name('toastr.success');
Route::get('/error', [ToastrController::class, 'error'])->name('toastr.error');
Route::get('/info', [ToastrController::class, 'info'])->name('toastr.info');
Route::get('/warning', [ToastrController::class, 'warning'])->name('toastr.warning');
The first route opens the master.blade.php view, while the remaining routes connect each notification type to its matching method in ToastrController. We’ve also given each route a name, which allows the notification cards in our Blade layout to link to them easily.
Step # 6 : Run and Verify Toastr Notifications.
Everything is ready, so let’s run the application and check the notifications. Start the Laravel development server with.
php artisan serve
Once the server is running, open your browser and visit: http://127.0.0.1:8000.
You’ll see four notification options on the page, each representing a different Toastr message type. Click anywhere on a notification card to trigger it. Each card is connected to its corresponding route, which calls the related controller method and displays the appropriate success, error, info, or warning message through Toastr. Try each option one by one to make sure all four notifications are working correctly and appearing as expected.
Conclusion
By following this guide, you’ve successfully added Toastr notifications to your Laravel 13 application using a controller, routes, and a reusable Blade layout. Toastr makes it easy to provide users with clear and immediate feedback through success, error, info, and warning messages, helping create a smoother and more responsive user experience without interrupting the current workflow. The setup is simple to customize and can be extended based on your application’s requirements.
For more details, configuration options, and advanced usage, check out the official Toastr documentation: https://github.com/CodeSeven/toastr.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments