{"_id":"@anfo/nuxt-dialogs-plugin","_rev":"3-a3383034ed4909150c604bdae0ffe14d","name":"@anfo/nuxt-dialogs-plugin","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@anfo/nuxt-dialogs-plugin","version":"1.0.0","keywords":["nuxt","nuxt-module","nuxt3","nuxt4","vue","vue3","dialog","dialogs","drawer"],"author":{"name":"anfo"},"license":"MIT","_id":"@anfo/nuxt-dialogs-plugin@1.0.0","maintainers":[{"name":"longjiahui","email":"longjiahui@hotmail.com"}],"dist":{"shasum":"2939da5ea2088ceabd39ccdfef2a274a4ee499b6","tarball":"https://registry.npmjs.org/@anfo/nuxt-dialogs-plugin/-/nuxt-dialogs-plugin-1.0.0.tgz","fileCount":15,"integrity":"sha512-8b2exIxM/dOYY/vOP36HgDUzdMDsGTj423bshlGmji/9/USDUCQzxQ3v9cWfe+Nx3ETZLF60FRq8d5CaB9pupQ==","signatures":[{"sig":"MEUCIQDj+ZCyi4wsSy1pdQGSSMQ3h6PvYuO/bGiZV1IoKVwHfQIgVi7tS5qad2SnodPmvM+iIl2oX0jCnRpRT5duTwHfyds=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":90339},"main":"./dist/module.cjs","type":"module","types":"./dist/module.d.ts","module":"./dist/module.js","exports":{".":{"types":"./dist/module.d.ts","import":"./dist/module.js","require":"./dist/module.cjs"},"./runtime":{"types":"./dist/runtime.d.ts","import":"./dist/runtime.js","require":"./dist/runtime.cjs"}},"gitHead":"2bce08e52ed7c5c535e34e29b3cb22bbddd530e8","scripts":{"build":"tsup","prepublishOnly":"npm run build"},"_npmUser":{"name":"longjiahui","email":"longjiahui@hotmail.com"},"_npmVersion":"11.14.0","description":"Nuxt module that auto-scans a directory for Vue dialog/drawer components and exposes them through a fully type-safe virtual module (virtual:dialogs). Dialog apps automatically inherit the Nuxt app context (Pinia, i18n, UI libraries, global components).","directories":{},"_nodeVersion":"25.2.1","dependencies":{"@nuxt/kit":"^3.11.0 || ^4.0.0","vue-component-type-helpers":"^2.0.0 || ^3.0.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.0","tsup":"^8.0.0","vite":"^6.0.0","typescript":"^5.0.0","@types/node":"^25.6.0"},"peerDependencies":{"vue":"^3.3.0","nuxt":">=3.5.0","vite":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/nuxt-dialogs-plugin_1.0.0_1788945354334_0.7678125338908521","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@anfo/nuxt-dialogs-plugin","version":"1.0.1","keywords":["nuxt","nuxt-module","nuxt3","nuxt4","vue","vue3","dialog","dialogs","drawer"],"author":{"name":"anfo"},"license":"MIT","_id":"@anfo/nuxt-dialogs-plugin@1.0.1","maintainers":[{"name":"longjiahui","email":"longjiahui@hotmail.com"}],"dist":{"shasum":"3cc9503937584f020d2d3f533a4212be54631618","tarball":"https://registry.npmjs.org/@anfo/nuxt-dialogs-plugin/-/nuxt-dialogs-plugin-1.0.1.tgz","fileCount":15,"integrity":"sha512-cX6c1fUofCEs74H8BnRSy3rK9nt0WcqTcQ288flNBObU7k8xIdTaZQ3NuCjxuChSuUjZA33EyAWyi3Cj0ldIkQ==","signatures":[{"sig":"MEQCIHRzmCFkhiXJYQivLPChMcOGRaeHvm7S6EYorvN/btpYAiBlhY5nnRAWzrmiZgXUaHVBt4PDZUnncB60rdfMyFiTzA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEUCIEJ5aAF8fisM9i6HwyLDSqIFNrKYslix/MxPXFrWjMtEAiEAmMlw81iA+uDFN54ijA6DLrPKI5dP2w2Yf6A3BtjDDwI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":94281},"main":"./dist/module.cjs","type":"module","types":"./dist/module.d.ts","module":"./dist/module.js","exports":{".":{"types":"./dist/module.d.ts","import":"./dist/module.js","require":"./dist/module.cjs"},"./runtime":{"types":"./dist/runtime.d.ts","import":"./dist/runtime.js","require":"./dist/runtime.cjs"}},"gitHead":"2bce08e52ed7c5c535e34e29b3cb22bbddd530e8","scripts":{"build":"tsup","prepublishOnly":"npm run build"},"_npmUser":{"name":"longjiahui","email":"longjiahui@hotmail.com"},"_npmVersion":"11.14.0","description":"Nuxt module that auto-scans a directory for Vue dialog/drawer components and exposes them through a fully type-safe virtual module (virtual:dialogs). Dialog apps automatically inherit the Nuxt app context (Pinia, i18n, UI libraries, global components).","directories":{},"_nodeVersion":"25.2.1","dependencies":{"@nuxt/kit":"^3.11.0 || ^4.0.0","vue-component-type-helpers":"^2.0.0 || ^3.0.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.0","tsup":"^8.0.0","vite":"^6.0.0","typescript":"^5.0.0","@types/node":"^25.6.0"},"peerDependencies":{"vue":"^3.3.0","nuxt":">=3.5.0","vite":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/nuxt-dialogs-plugin_1.0.1_1788964970764_0.46697922359239064","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"_id":"@anfo/nuxt-dialogs-plugin@1.0.2","dist":{"shasum":"3eea496916f4bd8689307698525a3e6db5396f1e","tarball":"https://registry.npmjs.org/@anfo/nuxt-dialogs-plugin/-/nuxt-dialogs-plugin-1.0.2.tgz","fileCount":15,"integrity":"sha512-oVkGyqyyUPXcvetNSejg+bIIaHr1iByg7fsYz+yvxzYE1ZwqhPbmQvSZ/YqnwCBsZetMxT2j3992qUStp4MgKg==","signatures":[{"sig":"MEQCIFA3MeDvM+eu4sed2y51N1LPNc3sMyB8TTeL9i65pHKhAiBpIWiXaZAp9rEYZ0b4N8IAr9lkgFfl5pE7FAVIH3zZsA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCUkoUQewoLhuEKXZQ2ub8q0TsaIDjovs32Lq/qL/dPEAIgGMXx1BsqfbhmMsuKL1S7MwjesY8RkLMD8Sr5BiGeHHA="}],"unpackedSize":96677},"main":"./dist/module.cjs","name":"@anfo/nuxt-dialogs-plugin","type":"module","types":"./dist/module.d.ts","author":{"name":"anfo"},"module":"./dist/module.js","exports":{".":{"types":"./dist/module.d.ts","import":"./dist/module.js","require":"./dist/module.cjs"},"./runtime":{"types":"./dist/runtime.d.ts","import":"./dist/runtime.js","require":"./dist/runtime.cjs"}},"gitHead":"5c0cfdf1e5241451ac73d0f47b2275f6a969c13c","license":"MIT","scripts":{"build":"tsup","prepublishOnly":"npm run build"},"version":"1.0.2","_npmUser":{"name":"longjiahui","email":"longjiahui@hotmail.com"},"keywords":["nuxt","nuxt-module","nuxt3","nuxt4","vue","vue3","dialog","dialogs","drawer"],"_npmVersion":"11.14.0","description":"Nuxt module that auto-scans a directory for Vue dialog/drawer components and exposes them through a fully type-safe virtual module (virtual:dialogs). Dialog apps automatically inherit the Nuxt app context (Pinia, i18n, UI libraries, global components).","directories":{},"maintainers":[{"name":"longjiahui","email":"longjiahui@hotmail.com"}],"_nodeVersion":"25.2.1","dependencies":{"@nuxt/kit":"^3.11.0 || ^4.0.0","vue-component-type-helpers":"^2.0.0 || ^3.0.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.0","tsup":"^8.0.0","vite":"^6.0.0","typescript":"^5.0.0","@types/node":"^25.6.0"},"peerDependencies":{"vue":"^3.3.0","nuxt":">=3.5.0","vite":">=4.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/nuxt-dialogs-plugin_1.0.2_1788965372414_0.6049876505689167"}}},"time":{"created":"2026-09-09T09:15:54.189Z","modified":"2026-09-09T14:49:32.671Z","1.0.0":"2026-09-09T09:15:54.499Z","1.0.1":"2026-09-09T14:42:50.856Z","1.0.2":"2026-09-09T14:49:32.493Z"},"author":{"name":"anfo"},"license":"MIT","keywords":["nuxt","nuxt-module","nuxt3","nuxt4","vue","vue3","dialog","dialogs","drawer"],"description":"Nuxt module that auto-scans a directory for Vue dialog/drawer components and exposes them through a fully type-safe virtual module (virtual:dialogs). Dialog apps automatically inherit the Nuxt app context (Pinia, i18n, UI libraries, global components).","maintainers":[{"name":"longjiahui","email":"longjiahui@hotmail.com"}],"readme":"# @anfo/nuxt-dialogs-plugin\n\nA Nuxt module that auto-scans a directory for Vue dialog/drawer components and exposes them through a fully type-safe virtual module (`virtual:dialogs`). Dialogs are mounted programmatically into isolated Vue app instances — no `<Teleport>` boilerplate, no global store, automatic cleanup on close.\n\n**Nuxt-native extras** — dialog apps automatically inherit the Nuxt app's context, so Pinia, i18n, UI libraries, global components and directives work inside dialogs with zero wiring. `dialogs` and the runtime composables are auto-imported.\n\n> This is the Nuxt counterpart of [`@anfo/vite-dialogs-plugin`](https://github.com/) — it is a standalone package and does not depend on it.\n\n## Installation\n\n```bash\nnpm install -D @anfo/nuxt-dialogs-plugin\n```\n\n## Quick Start\n\n### 1. Register the module — `nuxt.config.ts`\n\n```ts\nexport default defineNuxtConfig({\n  modules: [\"@anfo/nuxt-dialogs-plugin\"],\n\n  // Optional — these are the defaults\n  dialogs: {\n    dir: \"dialogs\", // relative to srcDir\n    // pattern: /(Dialog|Drawer)\\.vue$/,\n    // inheritNuxtApp: true,\n  },\n});\n```\n\n### 2. Create a dialog component\n\nEvery `.vue` file whose name ends with `Dialog.vue` or `Drawer.vue` inside your `dir` becomes a key on the `dialogs` object. No tsconfig changes are needed — the module generates the type declarations for you.\n\n```vue\n<!-- dialogs/ConfirmDialog.vue -->\n<script setup lang=\"ts\">\nimport {\n  useDialogContext,\n  createDialogExpose,\n  type DialogExposed,\n} from \"@anfo/nuxt-dialogs-plugin/runtime\";\n\ndefineProps<{ message: string }>();\n\nconst { resolve, reject } = useDialogContext<boolean>();\n\ndefineExpose<DialogExposed<boolean>>(createDialogExpose<boolean>());\n</script>\n\n<template>\n  <div class=\"overlay\">\n    <div class=\"box\">\n      <p>{{ message }}</p>\n      <button @click=\"resolve(true)\">Confirm</button>\n      <button @click=\"resolve(false)\">Cancel</button>\n    </div>\n  </div>\n</template>\n```\n\n### 3. Open dialogs from anywhere\n\n`dialogs` is auto-imported — no import statement needed:\n\n```vue\n<script setup lang=\"ts\">\nconst result = await dialogs.ConfirmDialog({ message: \"Delete this item?\" });\nif (result.type === \"resolve\" && result.value) {\n  // confirmed\n}\n\n// Or chain callbacks\ndialogs\n  .ConfirmDialog({ message: \"Are you sure?\" })\n  .resolve((value) => console.log(\"resolved:\", value))\n  .reject((reason) => console.log(\"rejected:\", reason));\n</script>\n```\n\n## Context inheritance — why dialogs \"just work\"\n\nEach dialog is mounted into its own isolated `createApp()` instance. By default (`inheritNuxtApp: true`) the module captures the Nuxt app and clones its context — global components, directives and `provide`s — onto every dialog app. That means everything your Nuxt app registered is available inside dialogs automatically:\n\n- **Pinia** stores (`@pinia/nuxt`)\n- **i18n** (`@nuxtjs/i18n` — `$t`, translations)\n- **UI libraries** (Element Plus, PrimeVue, Vuetify… registered via Nuxt plugins)\n- **Global components and directives**\n- **The `nuxtApp` itself** — `useNuxtApp()`, `useRoute()`… work inside dialogs\n\nSet `inheritNuxtApp: false` to keep dialogs fully isolated (parity with plain Vite projects), and register exactly what you need with `configureDialogs()`:\n\n```ts\n// plugins/dialogs.ts\nexport default defineNuxtPlugin((nuxtApp) => {\n  configureDialogs({\n    use: [\n      (app) => {\n        app.config.globalProperties.$something = \"...\";\n      },\n    ],\n  });\n});\n```\n\nBoth plugin objects (`{ install(app) {} }`) and plain `(app) => void` functions are accepted.\n\n## Module Options\n\n| Option | Type | Default | Description |\n|---|---|---|---|\n| `dir` | `string` | `\"dialogs\"` | Directory containing dialog components; relative paths resolve against `srcDir`. |\n| `pattern` | `RegExp` | `/(Dialog\\|Drawer)\\.vue$/` | RegExp to identify which files are dialogs. |\n| `inheritNuxtApp` | `boolean` | `true` | Dialog apps inherit the Nuxt app's context (components, directives, provides). |\n\n## Auto-imports\n\n| Name | From | Description |\n|---|---|---|\n| `dialogs` | `virtual:dialogs` | Open dialogs — `dialogs.ConfirmDialog(props)`. |\n| `useDialogContext` | `./runtime` | Get `{ resolve, reject }` inside a dialog component. |\n| `createDialogExpose` | `./runtime` | Typed expose helper for `defineExpose`. |\n| `configureDialogs` | `./runtime` | Register extra plugins for every dialog app. |\n\n## Package Exports\n\n| Specifier | Contents |\n|---|---|\n| `@anfo/nuxt-dialogs-plugin` | Nuxt module |\n| `@anfo/nuxt-dialogs-plugin/runtime` | Types, `useDialogContext`, `createDialogExpose`, `configureDialogs`, `DialogExposed` |\n\n## SSR\n\nDialogs are DOM-only. Calling `dialogs.*` during server-side rendering is safe — it warns and settles as `{ type: \"reject\", reason }` instead of crashing the render. Open dialogs from event handlers or `onMounted`.\n\n> Do not import `virtual:dialogs` from Nitro server code (`server/api`, `server/routes`) — the virtual module is only available in the app build.\n\n## Project Structure\n\n```\n<srcDir>/\n├── dialogs/              ← your dialog components (configurable)\n│   ├── ConfirmDialog.vue\n│   ├── AlertDialog.vue\n│   └── UserDrawer.vue\n└── nuxt.config.ts\n```\n\n## How It Works\n\n1. On startup the module registers a Vite plugin, a tiny runtime plugin (context capture), auto-imports and a type template.\n2. The Vite plugin generates a virtual module (`virtual:dialogs`) that imports each component through the `#dialogs-components` alias and wraps it in `mountDialog()`.\n3. `mountDialog()` creates an isolated `createApp()` instance per call, inherits the Nuxt app context, provides a `DialogController`, mounts it into a temporary `<div>`, and returns a Promise-based handle.\n4. When the component calls `resolve(value)` or `reject(reason)`, the app is unmounted and the host element removed automatically.\n5. A `.d.ts` type template is written into `.nuxt/` so every `dialogs.*` entry is typed end-to-end — props, return value, and callbacks. It regenerates when dialog files are added or removed during dev.\n\n> See [SKILL.md](SKILL.md) for step-by-step examples covering all dialog patterns.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}