In this tutorial, I’ll show you how to set up flash messages using the Laravel Notify package in your Laravel application. Laravel Notify allows you to create beautiful, customizable popup notifications for events like successes, errors, or warnings, all with minimal effort
Flash messages are a great way to inform users about actions like success, errors, or warnings. Instead of using basic session messages, the mckenziearts/laravel-notify
package helps you create beautiful and customizable popup notifications with ease. It’s a quick and effective way to enhance the user experience in your Laravel project.
Laravel Flash Message using Laravel Notify
In this step, we'll install the laravel application using the following command.
composer create-project laravel/laravel laravel-app
Now, we'll install Laravel-notify composer package using the following command.
composer require mckenziearts/laravel-notify
Next, we'll setup notify styles and script in the default blade file.
resources/views/theme/layout.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Flash Message using Laravel Notify - Techsolutionstuff</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
@notifyCss
<style type="text/css">
.notify{
z-index: 1001 !important;
}
</style>
</head>
<body>
<div class="container">
@yield('content')
</div>
@include('notify::components.notify')
@notifyJs
</body>
</html>
Then, we'll see examples of notifications.
Toast Notification
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class UserController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
notify()->success('User created successfully');
return view("users");
}
}
Smilify Notification:
smilify notification displays a simple custom toast notification using the smiley emoticon.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class UserController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
smilify('success', 'You are successfully reconnected.');
return view("users");
}
}
Connectify Notification:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class UserController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
connectify('success', 'Connection Found', 'Success Message Here');
return view("users");
}
}
Drakify Notification:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class UserController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
drakify('success', 'User created successfully.');
return view("users");
}
}
Emotify Notification:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class UserController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
drakify('success', 'User created successfully.');
return view("users");
}
}
You might also like: