Installation
Let's start by copying the necessary files to their respective directories in your Laravel project.
- Copy the Livewire components:
NotificationCenter.php
toapp/Livewire
Demo/NotificationCenterDemo.php
toapp/Livewire/Demo
- Copy the view files:
notification-center.blade.php
toresources/views/livewire
demo/notification-center-demo.blade.php
toresources/views/livewire/demo
- Copy the notification classes:
CommentNotification.php
MentionNotification.php
SystemNotification.php
app/Notifications
directory
Integration
1. First, ensure you have the notifications table migration:
php artisan notifications:table
php artisan migrate
2. Add the Notifiable trait to your User model if not already present:
use Illuminate\Notifications\Notifiable;
class User extends Authenticatable
{
use Notifiable;
// ...
}
3. Include the notification center in your layout:
<nav>
<!-- Other nav items -->
@livewire('notification-center')
</nav>
Usage
To send a notification:
// In your controller or service
auth()->user()->notify(new CommentNotification('New comment on your post!'));
Available notification types:
CommentNotification
- For comment-related notificationsMentionNotification
- For user mentionsSystemNotification
- For system announcements
Features
- Real-time updates using Livewire events
- Unread notification counter
- Mark individual or all notifications as read
- Grouped notifications by date
- Different icons for different notification types
- Responsive design with TailwindCSS
Customization
1. To add a new notification type:
php artisan make:notification YourNotification
2. Update the notification center view to handle the new notification type:
@case('App\Notifications\YourNotification')
<svg class="tw-h-5 tw-w-5 tw-text-green-500">
// Your custom icon
</svg>
@break
Demo
To test the notification center, include the demo component:
@livewire('demo.notification-center-demo')
This will display a demo interface with buttons to trigger different types of notifications.