Download the PHP package cloudstudio/laravel-livewire-modal without Composer

Laravel Livewire Modal

This package is inspired by wire-elements/modal, forked and rebuilt from scratch to provide full support for Livewire v3 and Tailwind 4. It provides a powerful Livewire component that gives you a modal system that supports multiple child modals while maintaining state.

Features

• 🚀 Fully compatible with Livewire v3
• 🎨 Styled with Tailwind 4
• 🔄 Maintains component state between modal interactions
• 📦 Support for nested/stacked modals
• 🛡️ Secure handling of data
• ⚡ Optimized performance
• 🔧 Highly customizable

Installation

You can install the package via composer:

After installing the package, you need to include the modal component in your blade layout file:

Tailwind Configuration

To properly configure Tailwind 4 with this package, add these lines to your app.css file:

Then run:

This ensures Tailwind can properly scan and generate the necessary styles for the modal components.

Basic Usage

Creating a Modal Component

Create a Livewire component that extends the LivewireModal class:

Opening a Modal

To open a modal from a Livewire component or a Blade view:

Handling Arguments

You can pass arguments to your modal when opening it:

Modal Events

You can dispatch events when closing a modal:

Customizing Modal Behavior

Changing Modal Width

You can change the width of the modal by overriding the modalMaxWidth method:

Display as Flyout

To display the modal as a flyout:

Flyout Position

To change the position of the flyout. Available positions are right, left, and bottom. Default is right:

Disable Closing on Escape Key

To prevent the modal from closing when the escape key is pressed:

Disable Closing on Outside Click

To prevent the modal from closing when clicking outside:

Controlling Escape Key Behavior

By default, pressing escape closes all modals. To change this behavior:

Triggering Close Events

To dispatch an event when the modal is closed:

Component State Management

To destroy the component state when a modal is closed:

Advanced Usage

Preventing Modal Close Based on State

You can prevent the modal from closing based on its state:

Skipping Previous Modals

For nested modal workflows where you want to skip returning to certain previous modals:

Configuration

Publish the configuration file:

This will create a livewire-modal.php config file with the following options:

Security

Remember to validate all data passed to your Livewire components. Since Livewire stores this information on the client-side, it can be manipulated. Use Laravel's Gate facade and other authorization mechanisms to secure your application.

Testing

Changelog

Please see CHANGELOG for more information on what has changed recently.

Credits

• Toni Soriano
• All Contributors
• wire-elements/modal

License

The MIT License (MIT). Please see License File for more information.