Weave Code
Code Weaver
Helps Laravel developers discover, compare, and choose open-source packages. See popularity, security, maintainers, and scores at a glance to make better decisions.
Feedback
Share your thoughts, report bugs, or suggest improvements.
Subject
Message

Laravel Toasty Laravel Package

atomcoder/laravel-toasty

View on GitHub
Deep Wiki
Context7

Getting Started

Minimal Setup

  1. Installation:

    composer require atomcoder/laravel-toasty
    

    Publish the config (optional):

    php artisan vendor:publish --provider="Atomcoder\Toasty\ToastyServiceProvider"
    
  2. First Toast in Blade:

    @toasty('Success!', 'Your action was completed.', 'success')
    

    Place this in your Blade layout or view where toasts should appear.

  3. First Toast in Livewire:

    use Atomcoder\Toasty\Facades\Toasty;
    
    public function mount() {
        Toasty::success('Success!', 'Your action was completed.');
    }
    
  4. First Toast via Redirect:

    return redirect()->route('target')->withToasty('success', 'Success!', 'Your action was completed.');
    

Where to Look First

  • Blade Directives: Check @toasty and @toastyStack in the README.
  • Facade API: Review Atomcoder\Toasty\Facades\Toasty methods in the API docs.
  • Livewire Integration: See the Livewire section for component usage.

Implementation Patterns

Blade Integration

  • Global Toasts: Add @toastyStack to your main layout (e.g., resources/views/layouts/app.blade.php) to render all queued toasts.

    @toastyStack
    
  • Conditional Toasts: Use Blade conditionals to show toasts only when needed:

    @if(session('toasty.success'))
        @toasty('Success!', session('toasty.success.message'), 'success')
    @endif
    
  • Dynamic Content: Pass variables from controllers to Blade:

    return view('dashboard')->withToasty('info', 'Welcome back!', 'You are now logged in.');
    

Livewire Integration

  • Component-Level Toasts: Use the Toasty facade in Livewire components:

    public function save() {
        try {
            // Save logic...
            Toasty::success('Saved!', 'Your changes were saved successfully.');
        } catch (\Exception $e) {
            Toasty::error('Error!', $e->getMessage());
        }
    }
    
  • Stacking Toasts: Queue multiple toasts in a row:

    public function process() {
        Toasty::info('Processing...', 'This may take a moment.');
        // Simulate async work
        sleep(1);
        Toasty::success('Done!', 'Processing completed.');
    }
    
  • Livewire Component Wrapper: Extend the ToastyLivewire component for reusable toast handling:

    use Atomcoder\Toasty\Livewire\ToastyLivewire;
    
    class MyComponent extends ToastyLivewire {
        // Custom logic...
    }
    

Redirects and Session Toasts

  • Flash Toasts: Use withToasty in redirects to persist toasts across requests:

    return redirect()->route('dashboard')->withToasty('success', 'Profile updated!', 'Your profile has been saved.');
    
  • Session-Based Toasts: Access toasts in Blade via session('toasty'):

    @if(session('toasty.success'))
        @toasty('Success', session('toasty.success.message'), 'success')
    @endif
    

Alpine.js Integration

  • Manual Triggering: Use the toasty() global function in Alpine:

    <button @click="toasty('info', 'Hello!', 'This is a toast from Alpine.')">
        Show Toast
    </button>
    
  • Dynamic Alpine Events: Trigger toasts from Alpine event handlers:

    document.addEventListener('alpine:init', () => {
        Alpine.data('myComponent', () => ({
            showToast() {
                toasty('success', 'Action completed!', 'Your request was processed.');
            }
        }));
    });
    

JavaScript Integration

  • Vanilla JS: Call the global toasty() function:

    toasty('warning', 'Warning!', 'This action cannot be undone.');
    
  • AJAX Responses: Handle toasts in AJAX success/error callbacks:

    $.ajax({
        url: '/update',
        success: function() {
            toasty('success', 'Updated!', 'Your data has been saved.');
        },
        error: function(xhr) {
            toasty('error', 'Error!', xhr.responseJSON.message || 'An error occurred.');
        }
    });
    

Gotchas and Tips

Common Pitfalls

  1. Toast Not Rendering:

    • Ensure @toastyStack is included in your Blade layout.
    • Check for JavaScript errors blocking the toast script (e.g., toasty.js).
    • Verify the toasty global is available in the browser console.
  2. Livewire Toasts Not Showing:

    • Ensure the ToastyLivewire component is registered in your Livewire stack.
    • Check for conflicts with other Livewire scripts (e.g., Alpine or custom JS).
    • Use wire:ignore on the toast container if needed:
      <div wire:ignore>
          @toastyStack
      </div>
      
  3. Session Toasts Disappearing:

    • Session toasts rely on session('toasty'). Ensure your session driver is configured correctly.
    • Avoid clearing the session prematurely (e.g., in middleware or filters).
  4. Namespace Conflicts:

    • The package uses the toasty namespace. Avoid naming custom functions or variables toasty to prevent conflicts.

Debugging Tips

  • Check the Queue: Dump the toast queue in Blade to verify toasts are being set:

    @dump(session('toasty.queue', []))
    
  • Inspect JavaScript: Open browser dev tools (F12) and check the Console for errors. Look for:

    toasty is not defined
    

    This indicates the script failed to load.

  • Clear Old Toasts: If toasts persist unexpectedly, clear the session manually:

    session()->forget('toasty.queue');
    session()->forget('toasty.success');
    session()->forget('toasty.error');
    // ... repeat for other types
    

Configuration Quirks

  • Custom Toast Types: Extend the default types (success, error, info, warning) by publishing the config and adding your own:

    'types' => [
        'success' => ['icon' => '✅', 'class' => 'bg-green-500'],
        'error'   => ['icon' => '❌', 'class' => 'bg-red-500'],
        'custom'  => ['icon' => '🔧', 'class' => 'bg-blue-500'],
    ],
    
  • Auto-Dismissal: Disable auto-dismissal globally in config/toasty.php:

    'auto_dismiss' => false,
    

    Or per-toast:

    Toasty::info('Persistent Toast', 'This will not auto-dismiss.', ['autoDismiss' => false]);
    
  • Positioning: Change the toast position (default: top-right) in the config:

    'position' => 'bottom-right',
    

Extension Points

  1. Custom Toast Views: Override the default toast Blade view by publishing the assets:

    php artisan vendor:publish --tag=toasty-views
    

    Then modify resources/views/vendor/toasty/toast.blade.php.

  2. Alpine Integration: Extend the Alpine toasty() function by adding custom logic to the global script:

    window.toasty = function(type, title, message, options = {}) {
        // Custom logic here
        Toasty.show(type, title, message, options);
    };
    
  3. Livewire Events: Listen for toast events in Livewire:

    protected $listeners = ['toast:show' => 'handleToast'];
    
    public function handleToast($event) {
        // Handle custom toast logic
    }
    
  4. Queue Management: Manually manage the toast queue in Blade:

    @php
        $toasts = session('toasty.queue', []);
        session()->forget('toasty.queue');
    @endphp
    @foreach($toasts as $toast)
        @toasty($toast['title'], $toast['message'], $
    
Weaver

How can I help you explore Laravel packages today?

Conversation history is not saved when not logged in.
Prompt
Add packages to context
No packages found.
hexters/coinpayment
rjcodes/rjcms
act-training/laravel-permissions-manager
alimarchal/laravel-chart-of-accounts
babenkoivan/elastic-scout-driver
mkwebdesign/filament-watchdog-v5
renatomarinho/laravel-page-speed
zedmagdy/filament-business-hours
renatovdemoura/blade-elements-ui
devgeek/beacon-admin
benjamin-rqt/data-watcher-bundle
atriumphp/atrium
sandermuller/package-boost-laravel
sandermuller/boost-skills
redaxo/core
yusufgenc/filament-api-forge
l3aro/rating-star-for-filament
leek/filament-subtenant-scope
anil/file-picker
broqit/fields-ai