Tall Toasts Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require daredloco/tall-toasts
   npm install --save-dev daredloco/tall-toasts
   

   Add the package to tailwind.config.js:

   plugins: [
       require('daredloco/tall-toasts'),
   ]
   

2. Publish Assets

   npm run dev  # or build
   

3. First Toast (Backend) In a controller or Blade view:

   use DareDLoco\TallToasts\Facades\Toast;
   
   Toast::success('Operation completed!');
   

   Render the toasts in your layout:

   @toasts
   

4. First Toast (Frontend) In Alpine/Livewire:

   import { toast } from 'daredloco/tall-toasts';
   
   toast.success('Livewire updated!');
   

Implementation Patterns

Backend Integration

• Controllers/Blade Use Toast::type('message') (e.g., success, error, warning, info).

  Toast::warning('This action is irreversible.')->autoDismiss(5000);
  

• Livewire Components Trigger toasts in mount() or actions:

  public function updateProfile()
  {
      // ... logic
      Toast::success('Profile updated!');
  }
  

• Queueing Toasts Store toasts in a session array and render them in a middleware:

  // Middleware
  public function handle($request, Closure $next)
  {
      if ($request->session()->has('toasts')) {
          $toasts = $request->session()->get('toasts');
          $request->session()->forget('toasts');
          Toast::queue($toasts);
      }
      return $next($request);
  }
  

Frontend Integration

• Alpine/Livewire Use the toast() helper in Alpine:

  document.addEventListener('alpine:init', () => {
      Alpine.data('user', () => ({
          deleteAccount() {
              toast.confirm('Are you sure?', () => {
                  // Confirm logic
              });
          }
      }));
  });
  

• Custom Triggers Extend with custom types:

  toast.custom('My Type', {
      icon: '⚡',
      timeout: 10000,
  });
  

• Livewire Events Emit toasts from Livewire:

  // Component
  public function save()
  {
      $this->emit('toast', ['type' => 'success', 'message' => 'Saved!']);
  }
  

  Listen in JS:

  Livewire.on('toast', (data) => toast[data.type](data.message));
  

Gotchas and Tips

Pitfalls

• Session Conflicts If using Toast::queue(), ensure session drivers are consistent (e.g., file for testing, redis for production).

  // Config/toasts.php
  'driver' => env('SESSION_DRIVER', 'file'),
  

• Duplicate Toasts Avoid calling Toast::success() multiple times in rapid succession. Use Toast::queue() for batching:

  Toast::queue([
      ['type' => 'info', 'message' => 'Step 1'],
      ['type' => 'info', 'message' => 'Step 2'],
  ]);
  

• Tailwind Conflicts The package publishes minimal CSS. If using custom Tailwind classes, ensure they don’t override default toast styles:

  /* Don’t override these! */
  .toast-success { /* ... */ }
  

Debugging

• Missing Toasts Check if @toasts is rendered in your layout. Verify the package’s JS is loaded:

  <script src="{{ mix('js/tall-toasts.js') }}"></script>
  

• Console Errors Clear npm cache and reinstall:

  npm cache clean --force
  rm -rf node_modules
  npm install
  

Extension Points

• Custom Toast Types Extend the JS API:

  toast.extend('loading', {
      template: `<div class="toast-loading">...</div>`,
      dismissible: false,
  });
  

• Backend Customization Override default types in config/toasts.php:

  'types' => [
      'success' => ['icon' => '✅', 'color' => 'green'],
      'custom'  => ['icon' => '🔧', 'color' => 'blue'],
  ],
  

• Livewire + Toasts For Livewire components, use wire:ignore on toast containers to prevent reactivity issues:

  <div wire:ignore>
      @toasts
  </div>