Installation

Let's start by copying the necessary files to their respective directories in your Laravel project.

  • Copy the Livewire components:
    • NotificationCenter.php to app/Livewire
    • Demo/NotificationCenterDemo.php to app/Livewire/Demo
  • Copy the view files:
    • notification-center.blade.php to resources/views/livewire
    • demo/notification-center-demo.blade.php to resources/views/livewire/demo
  • Copy the notification classes:
    • CommentNotification.php
    • MentionNotification.php
    • SystemNotification.php
    to 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 notifications
  • MentionNotification - For user mentions
  • SystemNotification - 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.