- How do I install wiremodal in a Laravel application?
- Install it with Composer using composer require edulazaro/wiremodal, then publish the assets with php artisan vendor:publish --tag=wiremodal-assets. Add the published CSS and JS files to your Blade layout with the asset() helper, or import them directly into your Vite bundle from resources/css/app.css and resources/js/app.js. No additional service provider configuration is required beyond publishing the assets.
- Does wiremodal work with Livewire components?
- Yes. Wiremodal ships Livewire macros so you can call $this->openModal('name') and $this->closeModal('name') directly from a component. Under the hood these dispatch open-wiremodal and close-wiremodal browser events through Livewire's dispatch(), so they stay consistent with existing event-driven workflows. You can also dispatch the raw events yourself if you prefer explicit calls.
- How do I pass data to a modal and get a result back?
- With Livewire, pass an array as the second argument, for example $this->openModal('edit-task', ['id' => 42]). In JavaScript, Wiremodal.open('confirm-delete', { id: 42 }) returns a Promise that resolves with the value given to Wiremodal.close(name, result). Listen for lifecycle events such as wiremodal:opened to bind that payload to your component or Alpine state. Complex or nested workflows may need extra logic to keep everything in sync.
- Can I use wiremodal with Alpine.js or plain JavaScript?
- Yes. The package is framework-agnostic and exposes a Wiremodal API with open, close, closeAll and isOpen methods. Alpine components can call these methods or listen for wiremodal:opened events, and vanilla pages can dispatch open-wiremodal and close-wiremodal CustomEvents directly. It also works without Livewire or Alpine installed at all.
- Which Laravel, Livewire and Alpine versions does wiremodal support?
- The package targets modern Laravel and Livewire releases and supports both Alpine 2 and Alpine 3, which reduces friction during upgrades. Exact Composer constraints are declared in the package's composer.json, so check them before installing in an older application. Because it relies only on stable Laravel, Livewire and Alpine APIs, version risk is low.
- How do I customize modal themes and sizes?
- Wiremodal includes 10 predefined themes and 11 sizes that you select with attributes on the x-wiremodal Blade component, such as size="sm". Themes are pure CSS and can be overridden through CSS variables, so you can build a custom theme without touching global styles. Test variable overrides against your design system if it already defines global CSS custom properties.
- Does wiremodal add JavaScript dependencies or bundle weight?
- No. Wiremodal has zero runtime dependencies and is implemented in pure CSS and JavaScript, so it does not pull in a modal library or UI framework. You can load the published files with a deferred script tag or import them into your Vite bundle. That keeps the footprint small and predictable.
- How do I test modals in a Livewire test suite?
- Because openModal and closeModal are macros over Livewire's dispatch(), you can assert them with Livewire's built-in event assertions such as assertDispatched('open-wiremodal') or assertDispatched('open-wiremodal', 'confirm-delete'). Test modal content by rendering the Blade component and asserting the expected text. Browser-level behaviour like focus trapping still needs an end-to-end test with Dusk or Playwright.
- Can I open multiple or nested modals at the same time?
- Yes, several modals can be open at once, and Wiremodal.closeAll() closes them together. Nested modals and shared state between modals are where the package's limited state management shows, so plan the workflow carefully. Passing data through wiremodal:opened events or Livewire properties keeps complex cases manageable.
- Is wiremodal accessible and suitable for production?
- The package is MIT licensed, has minimal abstraction and relies on mature Laravel, Livewire and Alpine ecosystems, which keeps technical risk low. Its default markup is not guaranteed to fully meet WCAG, so review ARIA attributes, focus management and keyboard navigation manually if accessibility is a requirement. Benchmark rendering if you expect many modals or heavy theme customisation on a single page.