{"id":29894219,"url":"https://github.com/worldzhao/vue-nice-modal","last_synced_at":"2025-08-01T04:45:57.696Z","repository":{"id":177894758,"uuid":"643154259","full_name":"worldzhao/vue-nice-modal","owner":"worldzhao","description":"Vue version of @ebay/nice-modal-react","archived":false,"fork":false,"pushed_at":"2025-03-30T10:52:05.000Z","size":264,"stargazers_count":52,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-04T22:49:07.176Z","etag":null,"topics":["dialog","modal","promise","utility-library","vant","vue","vue-composition-api","vue3","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/worldzhao.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-05-20T09:10:18.000Z","updated_at":"2025-07-04T07:29:10.000Z","dependencies_parsed_at":"2025-03-30T11:23:12.080Z","dependency_job_id":"ee68e371-7fc5-4a1e-bdf5-3041bb51dfb9","html_url":"https://github.com/worldzhao/vue-nice-modal","commit_stats":null,"previous_names":["worldzhao/vue-nice-modal"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/worldzhao/vue-nice-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/worldzhao%2Fvue-nice-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/worldzhao%2Fvue-nice-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/worldzhao%2Fvue-nice-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/worldzhao%2Fvue-nice-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/worldzhao","download_url":"https://codeload.github.com/worldzhao/vue-nice-modal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/worldzhao%2Fvue-nice-modal/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268171719,"owners_count":24207418,"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-08-01T02:00:08.611Z","response_time":67,"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":["dialog","modal","promise","utility-library","vant","vue","vue-composition-api","vue3","vuejs"],"created_at":"2025-08-01T04:45:48.946Z","updated_at":"2025-08-01T04:45:57.650Z","avatar_url":"https://github.com/worldzhao.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Nice Modal\n\n**Vue version of [@ebay/nice-modal-react](https://github.com/eBay/nice-modal-react).**\n\nvue-nice-modal is a utility library that converts Vue.js modal components into Promise-based APIs.\n\nSupports Vue 2.x via [vue-demi](https://github.com/vueuse/vue-demi).\n\nEnglish | [简体中文](https://github.com/worldzhao/vue-nice-modal/blob/main/README.zh-CN.md)\n\nAn elegant Vue modal state management solution, supporting both Vue 2 and Vue 3.\n\n## Features\n\n- 🎯 Simple and intuitive API\n- 🔄 Promise-based modal operations\n- 🎨 Framework agnostic - works with any UI library\n- ⚡️ Lightweight, zero dependencies\n- 🔌 Supports both Vue 2 and Vue 3\n- 📦 Full TypeScript support\n\n## Installation\n\n```bash\n# npm\nnpm install vue-nice-modal\n\n# pnpm\npnpm add vue-nice-modal\n```\n\n## Usage\n\n### 1. Wrap application with Provider\n\n```html\n\u003c!-- App.vue --\u003e\n\u003ctemplate\u003e\n  \u003cNiceModalProvider\u003e\n    \u003crouter-view /\u003e\n  \u003c/NiceModalProvider\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n  import { Provider as NiceModalProvider } from 'vue-nice-modal';\n\u003c/script\u003e\n```\n\n### 2. Create modal component\n\n```html\n\u003c!-- my-modal.vue --\u003e\n\u003ctemplate\u003e\n  \u003cvan-dialog\n    show-cancel-button\n    :value=\"modal.visible.value\"\n    :close-on-click-overlay=\"false\"\n    :title=\"title\"\n    :message=\"content\"\n    @closed=\"modal.remove\"\n    @confirm=\"handleConfirm\"\n    @cancel=\"handleCancel\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n  import { useModal } from 'vue-nice-modal';\n\n  const modal = useModal();\n  defineProps(['title', 'content']);\n\n  const handleCancel = () =\u003e {\n    modal.reject('cancel');\n    modal.hide();\n  };\n\n  const handleConfirm = () =\u003e {\n    modal.resolve('confirm');\n    modal.hide();\n  };\n\u003c/script\u003e\n```\n\n\u003e Can be used with any UI library, such as element-ui\n\n```html\n\u003c!-- my-modal.vue --\u003e\n\u003ctemplate\u003e\n  \u003cel-dialog\n    :title=\"title\"\n    :visible=\"modal.visible.value\"\n    append-to-body\n    @closed=\"modal.remove\"\n  \u003e\n    \u003cspan\u003e{{ content }}\u003c/span\u003e\n    \u003cspan slot=\"footer\" class=\"dialog-footer\"\u003e\n      \u003cel-button @click=\"handleCancel\"\u003eCancel\u003c/el-button\u003e\n      \u003cel-button type=\"primary\" @click=\"handleConfirm\"\u003eConfirm\u003c/el-button\u003e\n    \u003c/span\u003e\n  \u003c/el-dialog\u003e\n\u003c/template\u003e\n```\n\n\u003e Create modal higher-order component using NiceModal.create\n\n```js\n// my-modal.js\nimport NiceModal from 'vue-nice-modal';\n\nimport _MyModal from './my-modal.vue';\n\nexport const MyModal = NiceModal.create(_MyModal);\n```\n\n### 3. Using modals\n\n#### 3.1 Basic usage - directly using component\n\n```js\nconst showModal = async () =\u003e {\n  try {\n    const res = await NiceModal.show(MyModal, {\n      title: 'Title',\n      content: 'Content',\n    });\n    console.log('Result:', res);\n  } catch (error) {\n    console.log('Cancelled:', error);\n  }\n};\n```\n\n#### 3.2 Declarative usage - referencing declared modal via ID\n\n\u003e Can inherit context from declaration\n\n```html\n\u003ctemplate\u003e\n  \u003cMyModal id=\"my-modal\" /\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n  const showModal = async () =\u003e {\n    try {\n      const res = await NiceModal.show('my-modal', {\n        title: 'Title',\n        content: 'Content',\n      });\n      console.log('Result:', res);\n    } catch (error) {\n      console.log('Cancelled:', error);\n    }\n  };\n\u003c/script\u003e\n```\n\n#### 3.3 Hook usage - using useModal composition API\n\n```js\nconst modal = NiceModal.useModal(MyModal);\n\nconst showModal = async () =\u003e {\n  try {\n    const res = await modal.show({\n      title: 'Title',\n      content: 'Content',\n    });\n    console.log('Result:', res);\n  } catch (error) {\n    console.log('Cancelled:', error);\n  }\n};\n```\n\n#### 3.4 Registration usage - using ID after registration\n\n```js\n// Pre-register modal\nNiceModal.register('register-modal', MyModal);\n\nconst showModal = async () =\u003e {\n  try {\n    const res = await NiceModal.show('register-modal', {\n      title: 'Title',\n      content: 'Content',\n    });\n    console.log('Result:', res);\n  } catch (error) {\n    console.log('Cancelled:', error);\n  }\n};\n```\n\n## API Reference\n\n### Components\n\n#### `NiceModal.Provider`\n\nModal container component, needs to wrap the outermost layer of the application.\n\n#### `NiceModal.create(Component)`\n\nHigher-order component for creating modal components.\n\n### Methods\n\n#### `show(modalId, args?)`\n\nShow modal, supports passing parameters.\n\n- `modalId`: Modal ID or component\n- `args`: Parameters passed to modal\n- Returns: Promise\n\n#### `hide(modalId)`\n\nHide modal.\n\n- `modalId`: Modal ID or component\n- Returns: Promise\n\n#### `remove(modalId)`\n\nRemove modal from DOM.\n\n- `modalId`: Modal ID or component\n\n#### `register(id, component, props?)`\n\nRegister modal component.\n\n- `id`: Modal ID\n- `component`: Modal component\n- `props`: Default props\n\n#### `unregister(id)`\n\nUnregister modal component.\n\n- `id`: Modal ID\n\n### Hook\n\n#### `useModal(modal?, args?)`\n\nReturn values:\n\n- `id`: Modal ID\n- `args`: Modal parameters\n- `visible`: Visibility state\n- `show(args?)`: Show modal\n- `hide()`: Hide modal\n- `remove()`: Remove modal\n- `resolve(value)`: Resolve modal Promise\n- `reject(reason)`: Reject modal Promise\n- `resolveHide(value)`: Resolve hide Promise\n\n## Type Support\n\nThis package provides complete TypeScript type declarations, supporting type inference for props and parameters.\n\n## Build Output\n\n- Supports Tree Shaking\n- Provides both ESM/CJS formats\n\n```bash\ndist/\n  ├── esm/           # ES Module format\n  └── lib/           # CommonJS format\n```\n\n## Browser Compatibility\n\n- iOS \u003e= 9\n- Android \u003e= 4.4\n- Latest two versions of modern browsers\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworldzhao%2Fvue-nice-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fworldzhao%2Fvue-nice-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fworldzhao%2Fvue-nice-modal/lists"}