Wiremodal is a framework-agnostic modal package for Laravel, which allows to handle modals, so you don’t have co configure them in all your projects.
It ships a few Livewire-side helpers that make exactly this pleasant. This post is the Livewire integration end to end: opening and closing from PHP, delivering a payload on open, the one trap to avoid, and the optional form panel for when a modal happens to be a form.
How to install
Pull the package in and get the assets onto the page.
composer require edulazaro/wiremodal
php artisan vendor:publish --tag=wiremodal-assetsThe service provider auto-registers and there is no config file. Point your layout at the published files:
If you bundle with Vite, skip the publish and import straight from the vendor directory instead, so a package update flows through without re-publishing anything:
/* resources/css/app.css */
@import "../../vendor/edulazaro/wiremodal/resources/css/wiremodal.css";// resources/js/app.js
import '../../vendor/edulazaro/wiremodal/resources/js/wiremodal.js';Opening and closing from Livewire
Define the modal once with the <x-wiremodal> component, give it a name, and fill the body and footer slots. Here is a delete confirmation:
This action cannot be undone.
The Cancel button carries data-wm-dismiss, and any element with that attribute closes the modal it sits in, so you never write a cancel handler. To open and close from the component itself, use the macros the package registers on every Livewire component:
public function confirmDelete(): void
{
$this->openModal('confirm-delete');
}
public function destroy(): void
{
// delete the record...
$this->closeModal('confirm-delete');
}That is the whole open and close cycle from the server, and there is nothing to import: openModal and closeModal are macros wiremodal adds for you.
Handing the modal a payload
A confirmation needs no data, but most modals do: the row you clicked. openModal() takes a second argument, and Wiremodal delivers it to the modal through a wiremodal:opened event whose detail is { name, data }, fired on both the modal element and window. You read it with a one-line Alpine handler.
public function view(int $id): void
{
$task = Task::findOrFail($id);
$this->openModal('task-detail', [
'id' => $task->id,
'title' => $task->title,
]);
} x-data="{ task: {} }"
@wiremodal:opened.window="if ($event.detail.name === 'task-detail') task = $event.detail.data || {}">
The if ($event.detail.name === ...) guard matters because the event fires on window for every modal, so each one only reacts to its own payload. The panel fills with the right row the instant it opens.
The positional-dispatch trap
There is one mistake worth calling out, because it fails silently. Do not skip the macro and dispatch the browser event yourself with a positional string:
// Silently never opens the modal
$this->dispatch('open-wiremodal', 'task-detail');Livewire wraps that positional string into an array, so the browser receives e.detail = ['task-detail']. Wiremodal’s parser accepts a bare string or an object with a name key, never an array, so the modal just never opens and no error is thrown. The openModal() and closeModal() macros exist precisely to avoid this, since they dispatch with named arguments under the hood. If you ever dispatch by hand, use the named form:
$this->dispatch('open-wiremodal', name: 'task-detail', data: ['id' => 42]);When the modal is a form
Everything above works for any modal. When the modal happens to be a form and you want native submission, the Enter key and a real submit button, add as="form". It renders the panel as a <form> instead of a <div>, so wire:submit fires on submit and the autofocus attribute is honored.
as="form" wire:submit="save"
x-data
@wiremodal:opened.window="
if ($event.detail.name === 'edit-task') {
$wire.set('editingId', $event.detail.data.id);
$wire.set('title', $event.detail.data.title);
}
">
public ?int $editingId = null;
public string $title = '';
public function save(): void
{
Task::findOrFail($this->editingId)->update(['title' => $this->title]);
$this->closeModal('edit-task');
}You open it exactly as before with openModal('edit-task', [...]); the only difference is as="form" turning the panel into a real form so Enter and the submit button drive wire:submit. Without it you would hang a wire:click on the Save button instead. That is the point: the form is one prop, not the price of entry.
Sizes and persistent modals
Two props round it out. size takes one of eleven named widths and defaults to 2xl (42rem), running from xs (20rem) to 7xl (80rem); a value outside the catalog throws an InvalidArgumentException at render, so a typo fails loudly instead of producing a wrong-sized box.
Use fullscreen to fill the viewport. And persistent makes a modal ignore overlay clicks and the ESC key, so a wizard step or a you must choose prompt only closes through an explicit data-wm-dismiss button or a programmatic closeModal().
👉 Package on Packagist: https://packagist.org/packages/edulazaro/wiremodal
👉 Source on GitHub: https://github.com/edulazaro/wiremodal
Sumber Rujukan:
- Artikel asal dari Dev.to Laravel
- Published on haqis.com
