{"id":29115263,"url":"https://github.com/eddie0329/vue3-use-modal","last_synced_at":"2025-06-29T11:12:16.107Z","repository":{"id":40371128,"uuid":"459559103","full_name":"eddie0329/vue3-use-modal","owner":"eddie0329","description":"vue3-use-modal is vue3(vue-next) plugin that provide easy use of modal.","archived":false,"fork":false,"pushed_at":"2022-07-05T12:16:10.000Z","size":698,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-19T17:41:56.821Z","etag":null,"topics":["dialog","dialog-plugin","modal","modal-plugin","usedialog","usemodal","vue-plugin","vue3-hooks"],"latest_commit_sha":null,"homepage":"","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/eddie0329.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-15T11:57:47.000Z","updated_at":"2024-10-16T07:22:03.000Z","dependencies_parsed_at":"2022-08-29T10:00:16.890Z","dependency_job_id":null,"html_url":"https://github.com/eddie0329/vue3-use-modal","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/eddie0329/vue3-use-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eddie0329%2Fvue3-use-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eddie0329%2Fvue3-use-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eddie0329%2Fvue3-use-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eddie0329%2Fvue3-use-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eddie0329","download_url":"https://codeload.github.com/eddie0329/vue3-use-modal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eddie0329%2Fvue3-use-modal/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261178375,"owners_count":23120819,"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":["dialog","dialog-plugin","modal","modal-plugin","usedialog","usemodal","vue-plugin","vue3-hooks"],"created_at":"2025-06-29T11:07:04.083Z","updated_at":"2025-06-29T11:12:16.098Z","avatar_url":"https://github.com/eddie0329.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./images/logo.svg\" width=\"300\" height=\"300\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://npmjs.com/package/vue3-use-modal\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue3-use-modal.svg\" alt=\"npm package\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/eddie0329/vue3-use-modal/blob/main/LICENSE.md\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/vue3-use-modal.svg?style=flat-square\" alt=\"license\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/eddie0329/vue3-use-modal/pulls\"\u003e\u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\" alt=\"PR WELCOME\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://stackblitz.com/edit/vue-w6xg5y?file=src%2FApp.vue\"\u003e\u003cimg src=\"https://img.shields.io/badge/%F0%9F%92%A1-examples-ff615b.svg?style=flat-square\" alt=\"example\" /\u003e\u003c/a\u003e\n  \u003ca href=\"http://npm-stat.com/charts.html?package=vue3-use-modal\u0026from=2022-03-07\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/vue3-use-modal.svg?style=flat-square\" alt=\"example\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cbr /\u003e\n\n## 🎨 vue3-use-modal \n\n`vue3-use-modal` is vue3(vue-next) plugin that provide easy use of modal. It is not only component based but also lets using modal either **asynchronous or synchronous** behavior.\n\n\u003e 🚨 Caution: `vue3-use-modal` is not compatitable with vue2.\n\n## 🛠 Installation\n\n```shell\n# using npm\nnpm install vue3-use-modal\n\n# using yarn\nyarn add vue3-use-modal\n```\n\n## 📝 Setting in Vue3 \n\n```javascript\nimport { ModalPlugin } from 'vue3-use-modal';\n\ncreateApp(App).use(ModalPlugin).mount('#app');\n```\n\n## 📝 Setting in Nuxt3\n\n```javascript\n// plugins/modalPlugin\nimport { ModalPlugin } from 'vue3-use-modal';\n\nexport default defineNuxtPlugin((nuxtApp) =\u003e {\n  nuxtApp.vueApp.use(ModalPlugin);\n})\n```\n\n```javascript\n// nuxt.config.js\nmodule.exports = {\n  plugins: [\n    { src: '~/plugins/modalPlugin', mode: 'client' },\n  ],\n}\n```\n\n## 🏷 Type def\n\n```typescript\nimport { useModal } from 'vue3-use-modal';\n// shims-vue.d.ts\ndeclare module 'vue' {\n  interface ComponentCustomProperties {\n    $modal: ReturnType\u003cuseModal\u003e\n  }\n}\n```\n\n## 🎩 Usage vue-use-modal\n\n#### ⭐️ See example [here](https://stackblitz.com/edit/vue-w6xg5y?file=src%2FApp.vue).\n\n### 1\u003e Define modal component:\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv class=\"modal-bg\" /\u003e\n  \u003cdiv class=\"modal-content\"\u003e\n    \u003ch1\u003eHello vue-use-modal\u003c/h1\u003e\n    \u003ch2\u003e{{ myName }}\u003c/h2\u003e\n    \u003cbutton @click=\"$emit('resolve', 'eddie')\"\u003eresolve\u003c/button\u003e\n    \u003cbutton @click=\"$emit('reject', 'error')\"\u003ereject\u003c/button\u003e\n    \u003cbutton @click=\"$emit('close')\"\u003eclose\u003c/button\u003e\n  \u003cdiv\u003e\n\u003c/template\u003e\n```\n\n#### emit('resolve', value)\n\n- Type:\n``` typescript\ntype emit = ('resolve', value: any): void\n```\n- Description: Emit name `resolve` will resolve with the value.\n\n#### emit('reject', value)\n- Type:\n``` typescript\ntype emit = ('reject', value: any): void\n```\n- Description: Emit name `reject` will reject with the value.\n\n\n#### emit('close')\n- Type:\n```typescript\ntype emit = ('close')\n```\n- Description: Emit name `close` will simply close modal.\n\n### 2\u003e useModal:\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\nimport { useModal } from 'vue3-use-modal';\nimport SimpleModal from 'components/SimpleModal.vue';\n\nconst modal = useModal();\n\nconst onClick = async () =\u003e {\n  const name = await modal.addModal\u003cstring\u003e(\n    { \n      key: 'SimpleModal', \n      component: SimpleModal,\n      props: { name: 'eddie' }\n    });\n  alert(`My name is: ${name}`);\n}\n\u003c/script\u003e\n```\n\nOR\n\n```html\n\u003cscript lang=\"ts\"\u003e\nimport SimpleModal from 'components/SimpleModal.vue';\n\nexport default {\n  methods: {\n    async onClick() {\n      const name = await this.$modal.addModal\u003cstring\u003e(\n        {\n          key: 'SimpleModal',\n          component: SimpleModal,\n          props: { name: 'eddie' }\n        });\n      alert(`My name is: ${name}`);\n    }\n  },\n}\n\u003c/script\u003e\n```\n\n#### modal.addModal()\n\n- Type:\n```typescript\ntype addModal\u003cT\u003e = ({ key: string, component: import('vue').Component, props?: unknown }): Promise\u003cT\u003e;\n```\n\n#### modal.closeModal()\n- Type\n```typescript\ntype closeModal = (key: string): void;\n```\n\n## 🐛Report bug\n\nPlease report bug in issue tab with template.\n\n## 🙇🏻‍️ Contribution\n\nSee [CONTRIBUTION.md](https://github.com/eddie0329/vue3-use-modal/blob/main/.github/CONTRIBUTING.md)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feddie0329%2Fvue3-use-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feddie0329%2Fvue3-use-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feddie0329%2Fvue3-use-modal/lists"}