\n\n\n\n\n\n```\n\n### 4. Open it with `useModal`\n\nNow wire it up. `useModal` takes your component and hands back an `open`/`close` pair β and because it read your props, it *knows* `user` and `onConfirm` are required and won't let you call `open()` without them:\n\n```vue\n\n
\n \n \n
\n
\n {{ user.name }}\n \n
\n
\n
\n\n\n\n```\n\nβΈ»\n\n## π API reference\n\n### `VueModalPlugin`\n\nThe Vue plugin that sets up global modal state. Install it once β everything else assumes it's there, and `useModal` throws a clear error if it isn't:\n\n```js\nimport { createApp } from 'vue';\nimport VueModalPlugin from '@dsplce-co/vue-modal';\n\napp.use(VueModalPlugin);\n```\n\n### `ModalCollector`\n\nThe component that renders the active modal, via Vue's ``. Mount it once, near your app root.\n\n| Prop | Type | Default | What it does |\n|------|------|---------|--------------|\n| `transitionDuration` | `string` | `\"0.5s\"` | Length of the fade in/out β any CSS time value (`\"200ms\"`, `\"1s\"`, β¦) |\n\nIt also exposes a default slot β `{ component, payload, close }` β for when you want to render the overlay and wrapper yourself. See [Custom modal overlay and wrapper](#custom-modal-overlay-and-wrapper).\n\n```vue\n\n \n \n \n\n```\n\n### `useModal`\n\nCreates a typed controller for one modal component:\n\n```js\nimport { useModal } from '@dsplce-co/vue-modal';\n\nconst modal = useModal(YourModalComponent);\n```\n\nReturns:\n\n- `open(props)` β opens the modal, passing `props` through to your component\n- `close()` β closes whatever's open\n\n**Type safety is the whole point.** The controller infers from your component whether props are required or optional, and the compiler holds you to it:\n\n```ts\n// If the modal has required props\nmodal.open({ requiredProp: 'value' }); // β TypeScript enforces this\n\n// If the modal has only optional props\nmodal.open(); // β props can be omitted\nmodal.open({ optionalProp: 'value' }); // β or provided\n```\n\n### `ModalOverlay`\n\nThe default backdrop β a fixed, centered, blurred overlay that the collector wraps your modal in automatically. You only import it directly when you're building a [custom collector slot](#custom-modal-overlay-and-wrapper) and want the stock backdrop back. Like `ModalCollector`, it's exported from the package and resolvable via the [unplugin resolver](#auto-import-with-unplugin).\n\n### What the collector handles\n\n- **Teleport** β modals render at `` level, above everything (`z-index: 10000`)\n- **Backdrop** β a semi-transparent overlay with a `blur(4px)` behind your content\n- **Dismissal** β `Esc` and click-outside both close the active modal\n- **Transitions** β fade in/out, timed by `transitionDuration`\n- **One at a time** β opening a modal replaces whatever was already open\n- **Centering** β full-viewport overlay, content centered\n\n> **On accessibility:** vue-modal deliberately stays out of your modal's *content*, which means it doesn't impose ARIA roles or a focus trap on you. `role=\"dialog\"`, `aria-modal`, labelling and focus management belong in your own modal component β that's where the content lives, so that's where they make sense. Wire them there.\n\n### Writing a modal component\n\nWhatever you open just needs to play along with two things:\n\n1. **Emit `close`** β `$emit('close')` (or `defineEmits(['close'])`) is how your modal asks to be dismissed. The collector also closes on `Esc` and click-outside, but an in-modal \"Close\" button needs this.\n2. **Declare props normally** β `defineProps` as usual; the collector binds whatever you passed to `open()` straight onto your component.\n\nStyling the *content* is yours; the overlay and positioning are the collector's (see [Styling](#-styling)).\n\n```vue\n\n
\n
{{ title }}
\n \n
\n\n\n\n```\n\nβΈ»\n\n## π¨ Styling\n\nThe library brings the bare minimum: the overlay, the blur, the centering, the fade. Everything *inside* the modal β the card, the padding, the buttons β is yours, because it's your component. No design opinions shipped, nothing of yours to override.\n\nβΈ»\n\n## π§ Advanced usage\n\n### Auto-import with unplugin\n\n`vue-modal` ships a resolver for [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) and a preset for [unplugin-auto-import](https://github.com/unplugin/unplugin-auto-import), so the components and the composable show up without you importing them by hand.\n\n```bash\nnpm install -D unplugin-vue-components unplugin-auto-import\n```\n\n```ts\n// vite.config.ts\nimport Components from 'unplugin-vue-components/vite'\nimport AutoImport from 'unplugin-auto-import/vite'\nimport { VueModalResolver, VueModalPreset } from '@dsplce-co/vue-modal/resolver'\n\nexport default defineConfig({\n plugins: [\n Components({ resolvers: [VueModalResolver()] }),\n AutoImport({ imports: [VueModalPreset] }),\n ],\n})\n```\n\nNow `ModalCollector` and `ModalOverlay` are auto-imported as components, and `useModal` is globally available without imports:\n\n```vue\n\n\n\n \n\n```\n\n### Custom modal overlay and wrapper\n\nDon't like the stock overlay? The `ModalCollector` default slot hands you the active `component`, its `payload`, and a `close` function β render the lot however you like:\n\n```vue\n\n
\n
\n
\n \n
\n\n \n
\n
\n\n```\n\nβΈ»\n\n## π οΈ Requirements\n\n- **Vue 3** β declared as a peer dependency (`3.x`)\n\nβΈ»\n\n## π Repo & Contributions\n\nπ¦ **Package**: [@dsplce-co/vue-modal](https://www.npmjs.com/package/@dsplce-co/vue-modal) \nπ οΈ **Repo**: [github.com/dsplce-co/vue-modal](https://github.com/dsplce-co/vue-modal)\n\nContributions, issues, suggestions welcome. Hit us up π€\n\nβΈ»\n\n## π License\n\nMIT or Apache-2.0, at your option.\n","readmeFilename":"README.md"}