{"id":15283873,"url":"https://github.com/devsrv/livewire-modal","last_synced_at":"2025-07-20T15:35:05.763Z","repository":{"id":41187391,"uuid":"363442603","full_name":"devsrv/livewire-modal","owner":"devsrv","description":"Turn Laravel Livewire Component into Modal.","archived":false,"fork":false,"pushed_at":"2023-11-30T16:42:42.000Z","size":35,"stargazers_count":14,"open_issues_count":5,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-25T01:48:33.796Z","etag":null,"topics":["alpine-js","laravel","livewire","livewire-component","modal"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/devsrv.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-05-01T15:25:15.000Z","updated_at":"2024-07-07T20:18:41.000Z","dependencies_parsed_at":"2025-04-12T23:14:28.076Z","dependency_job_id":"a9f05e3d-316c-4435-a92e-4bdfd23022ae","html_url":"https://github.com/devsrv/livewire-modal","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/devsrv/livewire-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devsrv%2Flivewire-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devsrv%2Flivewire-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devsrv%2Flivewire-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devsrv%2Flivewire-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devsrv","download_url":"https://codeload.github.com/devsrv/livewire-modal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devsrv%2Flivewire-modal/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266151526,"owners_count":23884436,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alpine-js","laravel","livewire","livewire-component","modal"],"created_at":"2024-09-30T14:48:02.224Z","updated_at":"2025-07-20T15:35:05.746Z","avatar_url":"https://github.com/devsrv.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Livewire Modal\n\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/devsrv/livewire-modal.svg?style=flat-square)](https://packagist.org/packages/devsrv/livewire-modal)\n[![Total Downloads](https://img.shields.io/packagist/dt/devsrv/livewire-modal.svg?style=flat-square)](https://packagist.org/packages/devsrv/livewire-modal)\n\nTurn Laravel Livewire Component into Modal.\n\n\u003cimg src=\"https://staging.voyantcs.com/sourav/static/livewire-modal-sample-alt.gif\" width=\"720\" /\u003e\n\n## 🏷 Features\n- Modal triggered by javascript i.e. opens instantly without waiting for livewire network round trip to finish ( no laggy feeling )\n- Skeleton loading indicator \n- Support alert message ( info, warning, success, danger ) \n- Trigger from Alpine Component / Vanilla JS / Livewire Class Component\n\n## 🧾 Requirements\n\n| **Bootstrap**  | 4 or 5 | *no bootstrap support coming soon*\n|---|---|---|\n| Jquery  |   | *for bootstrap 4 only* \n|  Laravel | \u003e= 7 |   |\n|  Livewire | \u003e= 2.0  |   |\n|  Alpine JS |  |   |\n\n\n## 📥 Installation\n\n```shell\ncomposer require devsrv/livewire-modal\n```\n\n#### Include the base modal component\n```html\n\u003chtml\u003e\n\u003chead\u003e\n    ...\n    @livewireStyles\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js\" defer\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    ...\n    \u003cx-livewiremodal-base /\u003e 👈\n    @livewireScripts\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n#### Publish assets\n```shell\nphp artisan vendor:publish --provider=\"devsrv\\LivewireModal\\LivewireModalServiceProvider\" --tag=public\n```\n\n#### Publish config\n```shell\nphp artisan vendor:publish --provider=\"devsrv\\LivewireModal\\LivewireModalServiceProvider\" --tag=config\n```\n\u003e config support bootstrap theme: bs4 | bs5\n \n### 📌 Updating\n\u003e **Important:** when updating the package make sure to re-publish the assets with `--force` flag\n```shell\nphp artisan vendor:publish --provider=\"devsrv\\LivewireModal\\LivewireModalServiceProvider\" --tag=public --force\n```\n\n\n## ⚗️ Usage\n### \u003cimg src=\"https://laravel-livewire.com/favicon.ico\" width=\"20\" /\u003e Create Livewire Component \nNo consideration required, create livewire component as usual. Use livewire's `mount` to handle passed parameters\n\n### ✨ Open Modal\n\n###### ✔️ From Alpine Component\n```html\n\u003cdiv x-data\u003e\n  \u003cbutton type=\"button\" x-on:click='$dispatch(\"open-x-modal\", {\n    title: \"Heading Title\",\n    modal: \"livewire-component-name\",\n    size: \"xl\",\n    args: {{ json_encode($data_array) }}\n  })'\u003eopen\n  \u003c/button\u003e\n\u003c/div\u003e\n```\n\n###### ✔️ Via Vanilla JS\n\n```html\n\u003cbutton type=\"button\" onclick='_openModal(\"Heading\", \"component-name\", {{ json_encode($data) }}, \"sm\")'\u003e\n  open\n\u003c/button\u003e\n```\n\n\n###### ✔️ Via Trigger Blade Component\n\n```html\n\u003cx-livewiremodal-trigger class=\"btn\" \n\ttitle=\"Modal Heading\"\n\tmodal=\"component-name\"\n   :args=\"['sky' =\u003e 'blue', 'moon' =\u003e 1]\" \n   lg\u003eopen\n\u003c/x-livewiremodal-trigger\u003e\n```\n\n###### ✔️ From Livewire Class\n\n```php\n$this-\u003edispatchBrowserEvent('open-x-modal', ['title' =\u003e 'My Modal', 'modal' =\u003e 'product.order', 'args' =\u003e ['id' =\u003e 1, 'rate' =\u003e 20]]);\n```\n\n\u003e 💡 Modal size supports `sm` `lg` `xl`        *// completely optional*\n\n## 🌈 Bonus\nyou are free to put content in livewire view file in any structure, however the package provides an blade component for bootstrap modal which you can use as:\n\n```html\n\u003cx-livewiremodal-modal\u003e\n    \u003cdiv class=\"row\"\u003e\n        ...\n    \u003c/div\u003e\n    ...\n\n    \u003cx-slot name=\"footer\"\u003e\n        ...\n        \u003cbutton type=\"button\" class=\"..\"\u003eSave\u003c/button\u003e\n    \u003c/x-slot\u003e\n\u003c/x-livewiremodal-modal\u003e\n```\n\n#### ✌🏼 Two reasons to use this component\n\n🟢 a pretty line progress loading indicator which appears in the top when livewire loading state changes\n\n🟢 alert notification message which can be triggered by: \n```php \n$this-\u003einfo('\u003cstrong\u003eHi !\u003c/strong\u003e, i am an alert');  // support `info` `warning` `success` `danger`\n```\n\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n\n## 👋🏼 Say Hi! \nLeave a ⭐ if you find this package useful 👍🏼,\ndon't forget to let me know in [Twitter](https://twitter.com/srvrksh)  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevsrv%2Flivewire-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevsrv%2Flivewire-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevsrv%2Flivewire-modal/lists"}