andisiahaan/livewire-modal
| Install | |
|---|---|
composer require andisiahaan/livewire-modal |
|
| Latest Version: | 1.0.3 |
| PHP: | ^8.2 |
| License: | MIT |
| Last Updated: | Dec 8, 2025 |
| Links: | GitHub · Packagist |
Livewire Modal
A Livewire 4 modal component that supports multiple child modals while maintaining state.
Installation
composer require andisiahaan/livewire-modal
Setup
Add the Livewire directive to your layout file (typically before </body>):
<html>
<body>
<!-- Your content -->
@livewire('livewire-modal')
</body>
</html>
TailwindCSS
Add the following to your tailwind.config.js to include the modal styles:
export default {
content: [
'./vendor/andisiahaan/livewire-modal/resources/views/*.blade.php',
// ... your other paths
],
safelist: [
{
pattern: /max-w-(sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/,
variants: ['sm', 'md', 'lg', 'xl', '2xl']
}
],
}
Creating a Modal
Create a Livewire component that extends ModalComponent:
<?php
namespace App\Livewire;
use AndiSiahaan\LivewireModal\ModalComponent;
class EditUser extends ModalComponent
{
public $user;
public function mount($userId)
{
$this->user = User::findOrFail($userId);
}
public function save()
{
// Save logic...
$this->closeModal();
}
public function render()
{
return view('livewire.edit-user');
}
}
Opening a Modal
You can open a modal by dispatching the openModal event:
<!-- Outside of any Livewire component -->
<button onclick="Livewire.dispatch('openModal', { component: 'edit-user', arguments: { userId: 1 }})">
Edit User
</button>
<!-- Inside a Livewire component -->
<button wire:click="$dispatch('openModal', { component: 'edit-user', arguments: { userId: {{ $user->id }} }})">
Edit User
</button>
Passing Parameters
Parameters are automatically injected into your modal component:
class EditUser extends ModalComponent
{
public User $user; // Automatically resolved from route binding
public function render()
{
return view('livewire.edit-user');
}
}
<button wire:click="$dispatch('openModal', { component: 'edit-user', arguments: { user: {{ $user->id }} }})">
Edit User
</button>
Closing a Modal
From the view:
<button wire:click="$dispatch('closeModal')">Cancel</button>
From the component:
public function save()
{
// Save logic...
$this->closeModal();
}
With events:
public function save()
{
$this->user->save();
$this->closeModalWithEvents([
UserList::class => 'refreshList',
]);
}
Nested Modals
You can open a modal from within another modal:
<!-- Inside EditUser modal -->
<button wire:click="$dispatch('openModal', { component: 'delete-user', arguments: { user: {{ $user->id }} }})">
Delete User
</button>
When closing the child modal, it will return to the parent modal.
Force Close All Modals
$this->forceClose()->closeModal();
Skip Previous Modals
$this->skipPreviousModal()->closeModal();
// or skip multiple
$this->skipPreviousModals(2)->closeModal();
Modal Properties
Override these static methods in your modal component:
class EditUser extends ModalComponent
{
// Modal width: 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'
public static function modalMaxWidth(): string
{
return 'lg';
}
// Close when clicking outside
public static function closeModalOnClickAway(): bool
{
return false;
}
// Close when pressing Escape
public static function closeModalOnEscape(): bool
{
return true;
}
// Destroy component state on close
public static function destroyOnClose(): bool
{
return true;
}
}
Configuration
Publish the config file:
php artisan vendor:publish --tag=livewire-modal-config
Publish the views:
php artisan vendor:publish --tag=livewire-modal-views
License
MIT License. See LICENSE for more information.
Related Packages
A powerful Livewire dialog system with stack management, multiple dialog types,...
A Livewire 4 modal/bottomsheet component that supports multiple child modals whi...
Complete Flowbite component library for Laravel with Blade components, Tailwind...