{"id":18674291,"url":"https://github.com/simtabi/laramodal","last_synced_at":"2026-02-10T22:36:55.346Z","repository":{"id":83938296,"uuid":"408956347","full_name":"simtabi/laramodal","owner":"simtabi","description":null,"archived":false,"fork":false,"pushed_at":"2023-03-06T19:14:45.000Z","size":52,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-09-01T02:44:00.479Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Blade","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/simtabi.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}},"created_at":"2021-09-21T19:54:50.000Z","updated_at":"2022-03-26T19:56:06.000Z","dependencies_parsed_at":null,"dependency_job_id":"d872fa8a-508b-45ec-8255-cdc8ab6eb91b","html_url":"https://github.com/simtabi/laramodal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/simtabi/laramodal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simtabi%2Flaramodal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simtabi%2Flaramodal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simtabi%2Flaramodal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simtabi%2Flaramodal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simtabi","download_url":"https://codeload.github.com/simtabi/laramodal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simtabi%2Flaramodal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29319697,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-10T20:44:44.282Z","status":"ssl_error","status_checked_at":"2026-02-10T20:44:43.393Z","response_time":65,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-11-07T09:18:20.675Z","updated_at":"2026-02-10T22:36:55.339Z","avatar_url":"https://github.com/simtabi.png","language":"Blade","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Livewire Modal\n\nTurn any Laravel Livewire Component into Modal.\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 5\n- Laravel  \u003e= 7\n- Livewire \u003e= 2.0\n- Alpine JS \n\n\n## 📥 Installation\n\n```shell\ncomposer require simtabi/laramodal\n```\n\n#### Include the base modal component\n```html\n\u003chtml\u003e\n\u003chead\u003e\n    ...\n    @laramodalStylesInit\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    @laramodalScriptsInit\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n#### Publish assets\n```shell\nphp artisan vendor:publish --force --tag=laramodal:assets\n```\n\n#### Publish config\n```shell\nphp artisan vendor:publish --force --tag=laramodal:config\n```\n\u003e config support bootstrap theme: 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 --force --tag=laramodal:assets\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-modal-trigger class=\"btn btn-lg btn-block btn-flex btn-primary btn-active-primary fw-bolder text-center\"\n                        modal=\"component-name\"\n                        :args=\"[]\"\n\u003e\n    {{__('Title')}}\n\u003c/x-modal-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#### ✌🏼 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/simtabi)  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimtabi%2Flaramodal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimtabi%2Flaramodal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimtabi%2Flaramodal/lists"}