{"id":25569842,"url":"https://github.com/kotarcreative/vue2-modal","last_synced_at":"2025-07-31T13:33:58.276Z","repository":{"id":65379078,"uuid":"106763522","full_name":"kotarCreative/vue2-modal","owner":"kotarCreative","description":"A vue.js component for creating modals.","archived":false,"fork":false,"pushed_at":"2019-02-25T20:38:28.000Z","size":30,"stargazers_count":5,"open_issues_count":1,"forks_count":3,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-07-22T10:37:10.574Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","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/kotarCreative.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-10-13T01:34:05.000Z","updated_at":"2024-03-23T07:41:00.000Z","dependencies_parsed_at":"2023-01-20T08:25:15.226Z","dependency_job_id":null,"html_url":"https://github.com/kotarCreative/vue2-modal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kotarCreative/vue2-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kotarCreative%2Fvue2-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kotarCreative%2Fvue2-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kotarCreative%2Fvue2-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kotarCreative%2Fvue2-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kotarCreative","download_url":"https://codeload.github.com/kotarCreative/vue2-modal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kotarCreative%2Fvue2-modal/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268047953,"owners_count":24187209,"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","status":"online","status_checked_at":"2025-07-31T02:00:08.723Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":"2025-02-21T00:40:24.105Z","updated_at":"2025-07-31T13:33:58.256Z","avatar_url":"https://github.com/kotarCreative.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Modal\nA vue.js component for creating modals. Create modals and fill them with whatever components or HTML you want.\n\n## How to initialize Vue Modal\nVue modal is built as a vue plugin. It can be initialized just as the Vue documentation states.\n\n```javascript\nimport VueModal from \"vue2-modal\";\n\nVue.use(VueModal);\n```\n## Usage\n\n#### Creation\nVue modals are all accessed and run through the name that is given to a modal.\u003cbr\u003e\nA modal can be created by giving it a name and a function to run when it's closed.\u003cbr\u003e\nModals also contain a slot for the title section. Here is a very simple modal.\n```HTML\n\u003cvue-modal :on-close=\"closeModal\" name=\"my-modal\"\u003e\n    \u003ch2 slot=\"header\"\u003eHello World\u003c/h2\u003e\n    \u003cp\u003eThis modal will do stuff.\u003c/p\u003e\n\u003c/vue-modal\u003e\n```\n\n#### Show and Hide\nVue modals contains a very simple API for interacting with modals.\n- Show Modal: `this.$modals.show(\"my-modal\")`\n- Manually close modal: `this.$modals.hide(\"my-modal\")`\n- Check if a modal showing:  `this.$modals.isActive(\"my-modal\")`\n\n#### Styling\nThere are some built in stylings that can be changed or a manual theme can also be applied.\nThere are three props which are used to change the size of the modals themselves.\n1. size (xsm, sm, md, lg, xlg)\n2. width\n3. height\n\nTo apply custom themes simply create a string of standard css and pass it into the `theme` prop.\n\n##### Hooks\nThere are life cycle hooks that can be utilized to run actions at different points in the modals life.\n- onClose: Runs right before the close modal event is emitted\n- onShow: Runs after the modal have been rerendered to the screen.\n\n### Props\n\n| Prop           | Description                                         | Value                                 |\n|----------------|-----------------------------------------------------|---------------------------------------|\n| name           | The name of the modal. Used to show and hide modal. | String                                |\n| size           | The size of the modal                               | xsm, sm, md, lg, xlg                  |\n| width          | A fixed width for the modal                         | Number                                |\n| height         | A fixed height for the modal                        | Number                                |\n| hideCloseBtn   | Hides close button                                  | Boolean                               |\n| theme          | Css styles to be applied directly                   | String                                |\n| transitionName | The style of transition                             | zoom-in, zoom-out, fade, slide-in-top |\n| onClose        | A function that runs when a modal closes            | Function                              |\n| onShow         | A function that runs when a modal is shown          | Function                              |\n| outerClose     | Disables closing a modal by clicking outside of it  | Boolean                               |\n\n## License\nThis project is covered under the MIT License. Feel free to use it wherever you like.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkotarcreative%2Fvue2-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkotarcreative%2Fvue2-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkotarcreative%2Fvue2-modal/lists"}