{"_id":"@anycms/a2ui-vue","_rev":"2-cca153266de68d32573e6187372dd49c","name":"@anycms/a2ui-vue","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.1":{"name":"@anycms/a2ui-vue","version":"0.1.1","keywords":["a2ui","anycms","generative-ui","vue","renderer","ai-ui"],"author":{"name":"Liangdi","email":"wu@liangdi.me"},"license":"MIT","_id":"@anycms/a2ui-vue@0.1.1","maintainers":[{"name":"wuliangdi","email":"wu@liangdi.me"}],"homepage":"https://github.com/anycms/a2ui","bugs":{"url":"https://github.com/anycms/a2ui/issues"},"dist":{"shasum":"3459e021b4747a91af8c3556adeae5a8be1382d2","tarball":"https://registry.npmjs.org/@anycms/a2ui-vue/-/a2ui-vue-0.1.1.tgz","fileCount":17,"integrity":"sha512-W2ql+GP6AtvGaadjerYUcGIzwvu42inZ1NAkk61DheGOxir118pbpB8BQWS+jbYbc/qmwXKN62L/1nGecRyJoQ==","signatures":[{"sig":"MEUCIQDOBLtsTzufdKafijnDnvSVAXnLKnYfG8PPas+lTHcIbQIgQyhRsXofFEwetbAH9xmymdtQMHb7hYWQJAsHTP8tUWM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":172343},"main":"./dist/index.cjs","type":"module","_from":"file:anycms-a2ui-vue-0.1.1.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"scripts":{"test":"vitest run","build":"tsup","typecheck":"tsc --noEmit","test:watch":"vitest"},"_npmUser":{"name":"wuliangdi","email":"wu@liangdi.me"},"_resolved":"/tmp/70530c34272093c740342de96dbe0858/anycms-a2ui-vue-0.1.1.tgz","_integrity":"sha512-W2ql+GP6AtvGaadjerYUcGIzwvu42inZ1NAkk61DheGOxir118pbpB8BQWS+jbYbc/qmwXKN62L/1nGecRyJoQ==","repository":{"url":"git+https://github.com/anycms/a2ui.git","type":"git","directory":"packages/a2ui-vue"},"_npmVersion":"10.9.2","description":"Vue 3 renderer for A2UI v1.0.","directories":{},"_nodeVersion":"22.16.0","dependencies":{"@anycms/a2ui-core":"0.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.0","tsup":"^8.3.5","jsdom":"^25.0.1","vitest":"^2.1.8"},"peerDependencies":{"vue":"^3.4.0"},"_npmOperationalInternal":{"tmp":"tmp/a2ui-vue_0.1.1_1781596833155_0.40458466842085006","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@anycms/a2ui-vue","version":"0.2.0","description":"Vue 3 renderer for A2UI v1.0.","license":"MIT","author":{"name":"Liangdi","email":"wu@liangdi.me"},"homepage":"https://github.com/anycms/a2ui","repository":{"type":"git","url":"git+https://github.com/anycms/a2ui.git","directory":"packages/a2ui-vue"},"bugs":{"url":"https://github.com/anycms/a2ui/issues"},"keywords":["a2ui","anycms","generative-ui","vue","renderer","ai-ui"],"publishConfig":{"access":"public"},"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"peerDependencies":{"vue":"^3.4.0"},"dependencies":{"@anycms/a2ui-core":"0.2.0"},"devDependencies":{"jsdom":"^25.0.1","tsup":"^8.3.5","vitest":"^2.1.8","vue":"^3.4.0"},"scripts":{"build":"tsup","test":"vitest run","test:watch":"vitest","typecheck":"tsc --noEmit"},"_id":"@anycms/a2ui-vue@0.2.0","_integrity":"sha512-cbV/lpkdh+1wJtYb924VhNJG8YZj83iblUtUi1XD1miPFbNlLuQIM6V1uVV/OZ7YdqSGNC6IEnHGvH+kigMWpQ==","_resolved":"/tmp/efd302b417edec1d5049c9f1b9d68dd8/anycms-a2ui-vue-0.2.0.tgz","_from":"file:anycms-a2ui-vue-0.2.0.tgz","_nodeVersion":"25.1.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-cbV/lpkdh+1wJtYb924VhNJG8YZj83iblUtUi1XD1miPFbNlLuQIM6V1uVV/OZ7YdqSGNC6IEnHGvH+kigMWpQ==","shasum":"aefc4377f4bf2681537cfefcda7f2415a7b61dec","tarball":"https://registry.npmjs.org/@anycms/a2ui-vue/-/a2ui-vue-0.2.0.tgz","fileCount":17,"unpackedSize":183832,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQC2AvDBH9/gvlDd8oTUIZJMQNfCBsH8zJw7exMvslsPxAIhAKrwaGU1qFfSoSHvhXgWrRkD3uXmq8A1n0JsH62HRtb+"}]},"_npmUser":{"name":"wuliangdi","email":"wu@liangdi.me"},"directories":{},"maintainers":[{"name":"wuliangdi","email":"wu@liangdi.me"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/a2ui-vue_0.2.0_1781606799930_0.3459810330442177"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-16T08:00:33.048Z","modified":"2026-06-16T10:46:40.204Z","0.1.1":"2026-06-16T08:00:33.327Z","0.2.0":"2026-06-16T10:46:40.080Z"},"bugs":{"url":"https://github.com/anycms/a2ui/issues"},"author":{"name":"Liangdi","email":"wu@liangdi.me"},"license":"MIT","homepage":"https://github.com/anycms/a2ui","keywords":["a2ui","anycms","generative-ui","vue","renderer","ai-ui"],"repository":{"type":"git","url":"git+https://github.com/anycms/a2ui.git","directory":"packages/a2ui-vue"},"description":"Vue 3 renderer for A2UI v1.0.","maintainers":[{"name":"wuliangdi","email":"wu@liangdi.me"}],"readme":"# @anycms/a2ui-vue\n\nA **Vue 3 renderer** for [A2UI](https://github.com/anycms/a2ui) v1.0. It renders the same server-driven A2UI message stream as the React renderer, but with native Vue 3 components.\n\nIt is a peer of `@anycms/a2ui-react` and `@anycms/a2ui-dom`. The A2UI binders, reactive runtime, and message processor are reused unchanged from `@anycms/a2ui-core`; only the adapter (`createVueComponent` / `` / `A2uiNode`) and the 18 component Views are reimplemented for Vue.\n\n## Why\n\nDrop-in A2UI rendering for Vue 3 apps — no React runtime, no manual DOM. Each bound node subscribes to its own reactive props stream from core, so data-model changes update the UI granularly, inputs preserve focus across re-renders, and `Tabs`/`Modal` preserve local UI state.\n\n## Install\n\n```bash\npnpm add @anycms/a2ui-vue @anycms/a2ui-core\n```\n\n`vue` is a peer dependency (`^3.4.0`).\n\n## Usage\n\n```vue\n\n\n\n```\n\n`` renders the `root` component of a surface and provides the surface/catalog/registry to the tree. Each bound node self-subscribes to structural events (`onCreated`/`onDeleted`), so a component type-change rebuilds its binding and a late-arriving child mounts — without a top-level force-rerender.\n\nThe default registry (`basicVueComponents`) renders all 18 Basic Catalog components. Pass a custom registry to override individual components:\n\n```ts\nimport { createVueComponent, basicVueComponents } from '@anycms/a2ui-vue';\nimport { textBinder } from '@anycms/a2ui-core';\n\nconst registry = new Map(basicVueComponents);\nregistry.set('Text', createVueComponent(textBinder, myTextView));\n```\n\nA View is a plain render function `(vp: ComponentViewProps

) => VNodeChild` (stateless) — or it may delegate to an internal `defineComponent` for local UI state, as `Tabs` and `Modal` do:\n\n```ts\nimport { h, type VNodeChild } from 'vue';\nimport { createVueComponent, type ComponentViewProps } from '@anycms/a2ui-vue';\nimport { textBinder, type TextProps } from '@anycms/a2ui-core';\n\nconst TextView = ({ props }: ComponentViewProps): VNodeChild =>\n h('p', { class: 'a2ui-leaf' }, [props.text]);\n\nexport const registry = new Map([['Text', createVueComponent(textBinder, TextView)]]);\n```\n\n## How it maps to the React adapter\n\n| React | Vue |\n| --- | --- |\n| `createReactComponent(binder, View)` | `createVueComponent(binder, View)` |\n| `` force-rerenders the tree on structural change | `` provides context; each `A2uiNode` self-subscribes |\n| `useState` in `Tabs`/`Modal` | local `ref` in an internal `defineComponent` |\n| `useState` in the bound component for the props stream | `shallowRef` updated from `propsStream.subscribe` |\n\n## Styling\n\nMirrors the React vanilla preset: inline styles with the leaf-margin strategy (leaves carry 8px; containers flush) and semantic class hooks (`a2ui-surface`, `a2ui-row`, `a2ui-column`, `a2ui-list`, `a2ui-leaf`, `a2ui-modal`). No CSS framework required.\n\n## License\n\nMIT © Liangdi\n","readmeFilename":"README.md"}