Livewire Notify Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require twiq/livewire-notify
   npm install --save-dev @twiq/laravel-notifications  # If frontend assets are needed
   

2. Publish Config & Assets:

   php artisan vendor:publish --provider="Twiq\LivewireNotify\LivewireNotifyServiceProvider" --tag="config"
   php artisan vendor:publish --provider="Twiq\LivewireNotify\LivewireNotifyServiceProvider" --tag="public"
   

3. Add to Livewire Component: Include the notification component in your main layout (e.g., resources/views/layouts/app.blade.php):

   <livewire:livewire-notify />
   

4. First Notification: Trigger a notification in any Livewire component:

   use Twiq\LivewireNotify\Facades\LivewireNotify;
   
   public function save()
   {
       LivewireNotify::success('Item saved successfully!');
   }
   

First Use Case

Display a success notification after a form submission:

public function submitForm()
{
    $this->validate([...]);

    // Business logic...

    LivewireNotify::success('Your changes have been saved!');
    return redirect()->to('/dashboard');
}

Implementation Patterns

Core Workflows

1. Triggering Notifications: Use facade methods in Livewire actions:

   LivewireNotify::error('Invalid input', ['title' => 'Validation Error']);
   LivewireNotify::warning('Session expired', ['timeout' => 10]);
   

2. Conditional Notifications:

   if ($this->save()) {
       LivewireNotify::success('Success!', ['group' => 'user-actions']);
   } else {
       LivewireNotify::error('Failed to save.', ['group' => 'user-actions']);
   }
   

3. Grouped Notifications:

   // Show multiple notifications in a group
   LivewireNotify::info('First message', ['group' => 'updates']);
   LivewireNotify::info('Second message', ['group' => 'updates']);
   

4. Persistent Notifications:

   LivewireNotify::error('Critical error', ['persistent' => true]);
   

Integration Tips

• Livewire Events: Dispatch notifications from non-Livewire contexts using events:

  event(new \Twiq\LivewireNotify\Events\NotifyEvent('Custom message'));
  

• Alpine.js Customization: Extend Alpine components in resources/js/app.js:

  document.addEventListener('alpine:init', () => {
      Alpine.data('customNotify', () => ({
          init() {
              this.$watch('open', (value) => {
                  if (value) this.playSound();
              });
          },
          playSound() { /* ... */ }
      }));
  });
  

• Tailwind Theming: Override styles in resources/css/app.css:

  .notify-success { @apply bg-emerald-500; }
  

Gotchas and Tips

Common Pitfalls

1. Duplicate Notifications:

   • Issue: Rapid successive calls may trigger duplicates.
   • Fix: Use group parameter or adjust duplicateThreshold in config:

     LivewireNotify::success('Message', ['group' => 'unique-group']);
     

   • Config:

     'duplicate_threshold' => 2, // seconds
     

2. Livewire Component Not Rendering:

   • Ensure <livewire:livewire-notify /> is in a parent component (not a modal/dialog).
   • Verify LivewireNotifyServiceProvider is registered in config/app.php.

3. Tailwind Conflicts:

   • If notifications appear broken, purge Tailwind:

     npx tailwindcss -i ./resources/css/app.css -o ./public/css/app.css --watch
     

4. Alpine.js Initialization:

   • If animations fail, ensure Alpine is loaded after the Livewire component:

     <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
     

Debugging

• Log Notifications: Enable debug mode in config:

  'debug' => env('APP_DEBUG', false),
  

  Check Laravel logs for triggered notifications.

• Inspect DOM: Use browser dev tools to verify the notification container exists:

  <div x-data="livewireNotify()" x-init="init()" class="fixed top-4 right-4 z-50">
  

Extension Points

1. Custom Notification Types: Extend the Notification class:

   namespace App\Notifications;
   
   use Twiq\LivewireNotify\Notification;
   
   class CustomNotification extends Notification
   {
       public $type = 'custom';
       public $icon = '✨';
   }
   

   Use via facade:

   LivewireNotify::custom(new CustomNotification('Hello!'));
   

2. Override Default Views: Publish and modify views:

   php artisan vendor:publish --tag="livewire-notify-views"
   

   Edit resources/views/vendor/livewire-notify/.

3. Sound Configuration: Customize sounds in config/livewire-notify.php:

   'sounds' => [
       'success' => 'https://example.com/success.mp3',
       'error'   => asset('sounds/error.mp3'),
   ],
   

4. Dark Mode Quirks: Force dark mode in config:

   'dark_mode' => 'media', // 'media', 'light', or 'dark'