Livewire Notifier Laravel Package

Getting Started

First Steps

1. Installation Add the package via Composer:

   composer require codespb/livewire-notifier
   

   Publish the config (optional, but useful for customization):

   php artisan vendor:publish --provider="Codespb\LivewireNotifier\LivewireNotifierServiceProvider"
   

2. Basic Usage Import the trait in your Livewire component:

   use Codespb\LivewireNotifier\Traits\WithNotifier;
   

   Use it to flash notifications:

   public function mount()
   {
       $this->notify('success', 'Welcome!');
   }
   

3. First Use Case Trigger a success notification on form submission:

   public function save()
   {
       $this->validate([...]);
   
       // Save logic here...
   
       $this->notify('success', 'Record saved successfully!');
   }
   

Implementation Patterns

Common Workflows

1. Conditional Notifications Use ternary logic or helper methods to control when notifications appear:

   public function update()
   {
       if ($this->validate()) {
           $this->notify('success', 'Updated!');
       } else {
           $this->notify('error', 'Validation failed.');
       }
   }
   

2. Dynamic Messages Pass variables to notifications for dynamic content:

   $this->notify('info', "User {$this->user->name} created.");
   

3. Stacking Notifications Chain notifications for multi-step actions:

   $this->notify('info', 'Processing...');
   // ... async logic ...
   $this->notify('success', 'Done!');
   

4. Integration with Livewire Events Trigger notifications via Livewire events (e.g., in a parent component):

   public function updated($property)
   {
       $this->dispatch('notify', type: 'warning', message: 'Field changed.');
   }
   

5. Reusing Notifications Create a helper method in your component:

   protected function notifySuccess($message)
   {
       $this->notify('success', $message);
   }
   

Integration Tips

• Blade Integration Display notifications in your layout using:

  @livewireScripts
  @livewireStyles
  @stack('notifier')
  

  The package auto-renders notifications in the notifier stack.

• Custom Styling Override default styles via CSS or Tailwind:

  .livewire-notifier { /* Customize here */ }
  

• Localization Use Laravel’s translation system for multi-language support:

  $this->notify('success', __('notifications.success'));
  

Gotchas and Tips

Pitfalls

1. Notification Persistence Notifications are not stored in the session by default. They appear only on the next render cycle. For persistence, use Laravel’s session()->flash() alongside the notifier.

2. Duplicate Notifications Avoid calling $this->notify() multiple times in rapid succession (e.g., in updated() hooks). Use a flag or debounce logic:

   private $notified = false;
   public function updated()
   {
       if (!$this->notified) {
           $this->notify('info', 'Changed!');
           $this->notified = true;
       }
   }
   

3. Livewire Component Lifecycle Notifications triggered in mount() may not render immediately. Use updated() or render() hooks instead if timing is critical.

4. CSRF Conflicts Ensure your Livewire component has @csrf in the Blade template if using it outside the typical Livewire stack.

Debugging

• Check Config Verify config/livewire-notifier.php for custom types or durations:

  'types' => [
      'success' => 'bg-green-500',
      'error'   => 'bg-red-500',
  ],
  

• Inspect Rendered HTML Use browser dev tools to confirm notifications are being rendered in the @stack('notifier') section.

• Clear Cached Views If notifications don’t appear, run:

  php artisan view:clear
  

Extension Points

1. Custom Notification Types Extend the config to add new types (e.g., warning, info):

   'types' => [
       'custom' => 'bg-purple-500',
   ],
   

2. Override Default View Publish and modify the Blade template:

   php artisan vendor:publish --tag=livewire-notifier-views
   

   Edit resources/views/vendor/livewire-notifier/notification.blade.php.

3. Programmatic Control Access the notifier instance directly for advanced use:

   $this->notifier->add('custom', 'Message', ['timeout' => 10]);
   

4. Queue Notifications For async notifications, dispatch a job and trigger the notifier in the job’s handle method:

   public function handle()
   {
       // Simulate async work...
       $this->dispatchBrowserEvent('notify', ['type' => 'success', 'message' => 'Async done!']);
   }