Blog

How to Add Toastr Notification in Laravel 11 | websolutioncode.com
How to Add Toastr Notification in Laravel 11 | websolutioncode.com

How to Add Toastr Notification in Laravel 11

Toastr notifications are a popular way to display non-intrusive messages to users in web applications. In Laravel 11, integrating Toastr notifications is straightforward and can enhance the user experience of your application. In this tutorial, we’ll walk through the process of adding Toastr notification in Laravel 11 project.

Step 1: Install Laravel

If you haven’t already set up a Laravel project, you’ll need to do that first. Install Laravel using Composer by running the following command in your terminal:

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

Replace project-name with the desired name of your project.

Step 2: Install Toastr

To use Toastr in your Laravel project, you’ll need to install it via npm. Navigate to your project directory in the terminal and run the following command:

npm install toastr --save

This command will install Toastr and save it to your package.json file.

Step 3: Include Toastr CSS and JavaScript Files

Next, you need to include the Toastr CSS and JavaScript files in your Laravel project. Open your resources/css/app.css file and add the following line at the end:

@import "~toastr/toastr.scss";

Then, open your resources/js/bootstrap.js file and add the following lines at the end:

import 'toastr/toastr';
window.toastr = require('toastr');

Step 4:

After including Toastr in your project, you need to compile the assets to apply the changes. Run the following command in your terminal:

npm run dev

This command will compile your assets, including Toastr, and make them ready for use.

Step 5: Trigger Toastr Notifications

Now that Toastr is set up in your Laravel project, you can trigger notifications from your controllers or views. Here’s an example of how to display a success notification:

use Toastr;

public function index()
{
    Toastr::success('Task completed successfully', 'Success');
    return view('index');
}

In this example, we’re using the Toastr::success() method to display a success notification with the message “Task completed successfully” and the title “Success”. You can use Toastr::info(), Toastr::warning(), or Toastr::error() for different types of notifications.

Step 6: Display Toastr Notifications in Views

To actually display the Toastr notifications in your views, you need to include the following line in your main layout file, typically located at resources/views/layouts/app.blade.php:

{!! Toastr::message() !!}

This line will render the Toastr notifications wherever you place it in your layout file.

Conclusion

Congratulations! You’ve successfully integrated Toastr notifications into your Laravel 11 project. Toastr provides a simple yet effective way to communicate with users, enhancing the overall user experience of your application. Experiment with different types of notifications and styling options to best suit your application’s needs. Happy coding!

Tags: ,