Laravel Toastr Notifications Example Tutorial

Laravel 8 Toastr Notification Tutorial

Toastr is a popular JavaScript library used to display notifications like info, success, warning, and error in a sleek and user-friendly way. It's beneficial after actions such as user registration, form submission, or any other interactive feature.

In this tutorial, we’ll learn how to use Toastr in a Laravel 8 project.

Step 1: Install Toastr Package

Install the Laravel Toastr wrapper via Composer:

composer require brian2694/laravel-toastr

Laravel 5.5 and above: No need to register the service provider or alias manually. It uses package auto-discovery.

For Laravel <= 5.4

If you're using Laravel 5.4 or below, add the following to your config/app.php:

Service Provider:

Brian2694\Toastr\ToastrServiceProvider::class,

Alias (Optional):

'Toastr' => Brian2694\Toastr\Facades\Toastr::class,

Step 2: Publish Configuration (Optional)

To customize the Toastr settings (like position, timeout, etc.), publish the config file:

php artisan vendor:publish

Choose the config for brian2694/laravel-toastr.

Step 3: Add Toastr Assets to Blade Layout

Add the required CSS and JS for Toastr in your main layout file (layouts/app.blade.php or similar).

Inside `<head>` tag:

<link rel="stylesheet" href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css">

Before the closing `</body>` tag:

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
{!! Toastr::message() !!}

📝 Toastr::message() will render the flash message from the controller into the frontend as a toast notification.

Step 4: Use Toastr in Controller

Example usage in your controller to show a success message:

namespace App\Http\Controllers\Admin;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Brian2694\Toastr\Facades\Toastr;

class PostController extends Controller
{
    public function store(Request $request)
    {
        // Save logic here...

        Toastr::success('Post added successfully 🙂', 'Success');
        return redirect()->back();
    }
}

You can also use:

Toastr::info('Info message', 'Title');
Toastr::warning('Warning message', 'Title');
Toastr::error('Error message', 'Title');

Optional Customization

You can modify the default appearance and behavior of the notifications by editing the published config file:

// config/toastr.php
'options' => [
    "closeButton" => true,
    "progressBar" => true,
    "positionClass" => "toast-top-right",
    "timeOut" => "5000",
]

Output Preview

When a post is successfully created, you’ll see a toast notification like this:

Post added successfully 🙂

Souy Soeng

Laravel Toastr Notifications Example Tutorial

Laravel 8 Toastr Notification Tutorial

Step 1: Install Toastr Package

For Laravel <= 5.4

Step 2: Publish Configuration (Optional)

Step 3: Add Toastr Assets to Blade Layout

Inside `<head>` tag:

Before the closing `</body>` tag:

Step 4: Use Toastr in Controller

Optional Customization

Output Preview

5 Comments

Souy Soeng

Laravel Toastr Notifications Example Tutorial

Laravel 8 Toastr Notification Tutorial

Step 1: Install Toastr Package

For Laravel <= 5.4

Step 2: Publish Configuration (Optional)

Step 3: Add Toastr Assets to Blade Layout

Inside <head> tag:

Before the closing </body> tag:

Step 4: Use Toastr in Controller

Optional Customization

Output Preview

5 Comments

Inside `<head>` tag:

Before the closing `</body>` tag: