Getting Started

Minimal Setup

Installation

composer require marcorombach/livewire-confirm-modal

Update Tailwind Config Add the vendor path to your tailwind.config.js:

content: [
    "./resources/**/*.blade.php",
    "./vendor/marcorombach/livewire-confirm-modal/resources/views/components/*.php"
]

Publish Assets (Optional) Run php artisan vendor:publish --provider="MarcoRombach\LivewireConfirmModal\ConfirmModalServiceProvider" to customize the modal view.

First Use Case

Replace wire:confirm with wire:confirm-modal in your Blade template:

<a href="#" wire:confirm-modal="Are you sure?">Delete</a>

The package automatically renders a styled modal instead of the default browser confirm() dialog.

Implementation Patterns

Basic Usage

Replacing wire:confirm Swap wire:confirm with wire:confirm-modal for consistent styling across browsers:
```
<button wire:confirm-modal="Delete this item?">Delete</button>
```

Customizing Confirmation Text Pass dynamic messages via Livewire properties:

<button wire:confirm-modal="{{ $confirmationMessage }}">Confirm</button>

In your Livewire component:

public $confirmationMessage = "Are you sure you want to proceed?";

Advanced Patterns

Custom Modal Content Override the default modal view by publishing the package assets and modifying:
```
@livewireConfirmModal
```
Customize the resources/views/vendor/livewire-confirm-modal/modal.blade.php file.
Integration with Livewire Actions Use wire:click with wire:confirm-modal for conditional actions:
```
<button wire:click="deleteItem" wire:confirm-modal="Confirm deletion?">Delete</button>
```

Dynamic Styling Pass Tailwind classes via Livewire properties:

public $modalClasses = "bg-gray-800 text-white";

<button wire:confirm-modal="{{ $confirmationMessage }}" :wire:confirm-modal-classes="$modalClasses">Action</button>

Conditional Confirmation Disable the modal for specific cases using Livewire logic:

<button wire:confirm-modal="{{ $shouldConfirm ? 'Confirm?' : '' }}" wire:click="action">Action</button>

Workflow Integration

Component-Level Confirmation Define confirmation logic in your Livewire component:

public function deleteItem() {
    if ($this->confirm) {
        // Perform deletion
    }
}

<button wire:click="deleteItem" wire:confirm-modal="Delete?">Delete</button>

Reusable Confirmation Logic Create a trait or base component for consistent confirmation handling:

trait UsesConfirmModal {
    public $confirmationMessage = "";
    public $shouldConfirm = true;
}

Gotchas and Tips

Common Pitfalls

Tailwind Config Missing Forgetting to add the vendor path to tailwind.config.js will break the modal styling. Always verify:

content: [
    "./resources/**/*.blade.php",
    "./vendor/marcorombach/livewire-confirm-modal/resources/views/components/*.php"
]

JavaScript Conflicts If the modal doesn’t appear, ensure no other Livewire directives or JavaScript are interfering with the wire:confirm-modal event listeners.
Dynamic Content Not Rendering If passing dynamic messages (e.g., {{ $message }}), ensure the variable is defined in your Livewire component to avoid errors.

Debugging Tips

Check Console for Errors Open browser dev tools to verify if the modal script is loaded and if there are any JavaScript errors.
Inspect Published Views After publishing the package, inspect resources/views/vendor/livewire-confirm-modal/modal.blade.php to ensure customizations are applied correctly.
Verify Livewire Events Use wire:debug to confirm the confirm-modal event is being triggered:
```
@this
```

Extension Points

Custom Modal Templates Extend the modal by copying the default view to your project and modifying it:

php artisan vendor:publish --provider="MarcoRombach\LivewireConfirmModal\ConfirmModalServiceProvider" --tag="views"

Add Icons or Buttons Modify the published modal view to include additional UI elements like icons or secondary buttons:

<button class="pines-button pines-button--danger">
    <span>Delete</span>
</button>
<button wire:click="$emit('confirm-modal-cancel')" class="pines-button pines-button--secondary">
    Cancel
</button>

Localization Support Add language support by extending the modal view to include __() or trans() calls for multilingual projects.

Performance Considerations

Lazy-Loading Modals For large applications, consider lazy-loading the modal script to reduce initial load time:

@push('scripts')
    @livewireScripts
    <script src="{{ asset('vendor/livewire-confirm-modal/confirm-modal.js') }}" defer></script>
@endpush

Avoid Overusing Confirmation Modals While useful, excessive use of confirmation modals can degrade UX. Reserve them for critical actions (e.g., deletions, irreversible changes).

Livewire Confirm Modal Laravel Package