{"id":13824512,"url":"https://github.com/kolirt/vue-modal","last_synced_at":"2026-05-09T11:02:42.207Z","repository":{"id":176889208,"uuid":"659707820","full_name":"kolirt/vue-modal","owner":"kolirt","description":"⚡️ Easy to use and highly customizable Vue3 modal package","archived":false,"fork":false,"pushed_at":"2025-03-29T10:17:14.000Z","size":965,"stargazers_count":18,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-04T08:13:20.697Z","etag":null,"topics":["modal","modal-dialog","modal-dialogs","modal-windows","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://kolirt.github.io/vue-modal/","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/kolirt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"custom":"https://www.buymeacoffee.com/kolirt"}},"created_at":"2023-06-28T11:46:50.000Z","updated_at":"2025-05-14T09:14:59.000Z","dependencies_parsed_at":"2024-01-02T23:29:13.672Z","dependency_job_id":"0df1a54b-7f0d-409c-a2aa-a050790ac143","html_url":"https://github.com/kolirt/vue-modal","commit_stats":{"total_commits":56,"total_committers":2,"mean_commits":28.0,"dds":0.0357142857142857,"last_synced_commit":"badc68a98be80161a25575e7aa9f74f041a6c9c4"},"previous_names":["kolirt/vue-modal"],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/kolirt/vue-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolirt%2Fvue-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolirt%2Fvue-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolirt%2Fvue-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolirt%2Fvue-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kolirt","download_url":"https://codeload.github.com/kolirt/vue-modal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolirt%2Fvue-modal/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260654642,"owners_count":23042675,"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":["modal","modal-dialog","modal-dialogs","modal-windows","vue","vuejs"],"created_at":"2024-08-04T09:01:03.981Z","updated_at":"2026-05-09T11:02:42.193Z","avatar_url":"https://github.com/kolirt.png","language":"Vue","funding_links":["https://www.buymeacoffee.com/kolirt"],"categories":["Packages","Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/kolirt/vue-modal/master/docs/public/logo.png\" alt=\"@kolirt/vue-modal\" width=\"160\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e@kolirt/vue-modal\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  Open modals from any function, stack them as needed, and style them however you want.\u003cbr /\u003e\n  No template boilerplate, no manual state — just call and \u003ccode\u003eawait\u003c/code\u003e.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@kolirt/vue-modal\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@kolirt/vue-modal.svg?style=flat-square\" alt=\"npm version\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@kolirt/vue-modal\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/@kolirt/vue-modal.svg?style=flat-square\" alt=\"npm downloads\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/kolirt/vue-modal/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/@kolirt/vue-modal.svg?style=flat-square\" alt=\"license\" /\u003e\u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/static/v1?label=Made%20with\u0026message=VueJS\u0026color=limegreen\u0026style=flat-square\u0026logo=vue.js\" alt=\"Vue 3\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://kolirt.github.io/vue-modal/\"\u003e\u003cstrong\u003e📚 Documentation\u003c/strong\u003e\u003c/a\u003e ·\n  \u003ca href=\"https://kolirt.github.io/vue-modal/playground\"\u003e\u003cstrong\u003e🎮 Playground\u003c/strong\u003e\u003c/a\u003e ·\n  \u003ca href=\"https://kolirt.github.io/vue-modal/recipes/confirm-dialog\"\u003e\u003cstrong\u003e🍳 Recipes\u003c/strong\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## What you get\n\n`@kolirt/vue-modal` is a lightweight, headless modal package for Vue 3. It lets you open, stack, and control dialogs imperatively from any function — without registering modal components in templates or wiring open/close state by hand.\n\n- **Open from JS/TS** — trigger modals from any function and await the user's response. A single call returns a typed promise with full TypeScript inference for props and result.\n- **Less template boilerplate** — skip placing every modal in your templates and wiring open/close state by hand. Register one mount point and trigger any modal from code with a single call.\n- **Cascading modals** — open multiple modals one after another while preserving their state and context. Layer a confirmation on top of a form without losing the form's data.\n- **Highly customizable** — headless primitives with no imposed styles. Bring your own CSS, transitions, and animations — compose modals that fit any design system.\n- **Modal groups** — isolate flows with named groups — the main app stack, confirm dialogs, side panels — each rendering in its own mount point with its own queue.\n- **Async components** — open any Vue component, including async ones loaded on demand. Heavy modals stay out of your initial bundle and resolve through the same promise.\n\n## Install\n\n```bash\nnpm install @kolirt/vue-modal reka-ui\n# or\nyarn add @kolirt/vue-modal reka-ui\n# or\npnpm add @kolirt/vue-modal reka-ui\n```\n\n`reka-ui` is a peer dependency.\n\n## Quick start\n\n**1. Register groups and install the plugin** (`main.ts`):\n\nThe package requires every modal to belong to a registered group. Without registered groups the package can't be used at all — there's no implicit `'default'`.\n\n```ts\nimport { createApp } from 'vue'\nimport { createModal, type DefineGroups } from '@kolirt/vue-modal'\nimport App from './App.vue'\n\n// (TypeScript only) Type-check every `group` reference against this list.\ndeclare module '@kolirt/vue-modal' {\n  interface ModalGroupRegistry extends DefineGroups\u003c['default']\u003e {}\n}\n\nconst app = createApp(App)\n\napp.use(\n  createModal({\n    groups: {\n      // per-group behavior options — see /guide/behavior-options for the full list\n      default: {}\n    }\n  })\n)\n\napp.mount('#app')\n```\n\n**2. Mount a `\u003cModalTarget\u003e` for each group** (`App.vue`):\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { ModalTarget, ModalOverlay } from '@kolirt/vue-modal'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cRouterView /\u003e\n\n  \u003cModalTarget group=\"default\"\u003e\n    \u003cModalOverlay class=\"overlay\" /\u003e\n  \u003c/ModalTarget\u003e\n\u003c/template\u003e\n```\n\n**3. Write a modal:**\n\n```vue\n\u003c!-- ConfirmDialog.vue --\u003e\n\u003cscript setup lang=\"ts\"\u003e\nimport { ModalRoot, ModalContent, ModalTitle, ModalDescription, useModalContext } from '@kolirt/vue-modal'\n\ndefineOptions({ modalGroup: 'default' })\n\nconst props = defineProps\u003c{ message: string }\u003e()\n\nconst { close, confirm } = useModalContext\u003cboolean\u003e()\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cModalRoot class=\"root\"\u003e\n    \u003cModalContent class=\"card\"\u003e\n      \u003cModalTitle\u003eConfirm\u003c/ModalTitle\u003e\n      \u003cModalDescription\u003e{{ props.message }}\u003c/ModalDescription\u003e\n\n      \u003cdiv class=\"actions\"\u003e\n        \u003cbutton @click=\"close()\" class=\"btn btn--cancel\"\u003eCancel\u003c/button\u003e\n        \u003cbutton @click=\"confirm(true)\" class=\"btn btn--confirm\"\u003eOK\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/ModalContent\u003e\n  \u003c/ModalRoot\u003e\n\u003c/template\u003e\n```\n\n\u003e Styles omitted for brevity. See the [first modal](https://kolirt.github.io/vue-modal/getting-started/first-modal) page for the full version with enter/exit animations.\n\n**4. Open it from anywhere:**\n\n```ts\nimport { openModal } from '@kolirt/vue-modal'\nimport ConfirmDialog from './ConfirmDialog.vue'\n\nconst ok = await openModal\u003cboolean\u003e(ConfirmDialog, {\n  props: { message: 'Delete this project?' }\n}).catch(() =\u003e false)\n\nif (ok) {\n  // user pressed OK\n}\n```\n\n## Documentation\n\nEverything lives at **[kolirt.github.io/vue-modal](https://kolirt.github.io/vue-modal/)**:\n\n- [Getting started](https://kolirt.github.io/vue-modal/getting-started/introduction) — install, setup, your first modal\n- [Concepts](https://kolirt.github.io/vue-modal/concepts/architecture) — architecture, imperative flow, stacking, groups, headless primitives\n- [Guide](https://kolirt.github.io/vue-modal/guide/writing-a-modal) — writing modals, props \u0026 results, behavior options, styling, `useModal`, multiple targets, async components, TypeScript\n- [Recipes](https://kolirt.github.io/vue-modal/recipes/confirm-dialog) — confirm dialog, form with validation, lightbox, command palette, nested flows, global error modal\n- [API reference](https://kolirt.github.io/vue-modal/api/functions) — functions, components, composables, plugin, state, types\n- [Migration from v1](https://kolirt.github.io/vue-modal/resources/migration-from-v1) · [FAQ](https://kolirt.github.io/vue-modal/resources/faq) · [Troubleshooting](https://kolirt.github.io/vue-modal/resources/troubleshooting) · [Changelog](https://kolirt.github.io/vue-modal/resources/changelog)\n\n## Support\n\n\u003ca href=\"https://www.buymeacoffee.com/kolirt\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/arial-yellow.png\" alt=\"Buy Me A Coffee\" height=\"48\" /\u003e\n\u003c/a\u003e\n\n## License\n\n[MIT](https://github.com/kolirt/vue-modal/blob/master/LICENSE)\n\n## Other packages\n\nCheck out my other projects on my [GitHub profile](https://github.com/kolirt).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkolirt%2Fvue-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkolirt%2Fvue-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkolirt%2Fvue-modal/lists"}