Vue 3 renderer for json-render. Use when building Vue UIs from JSON specs, working with @json-render/vue, defining Vue component registries, or rendering AI-generated specs in Vue.

@json render/vue Vue 3 renderer that converts JSON specs into Vue component trees with data binding, visibility, and actions. Installation Peer dependencies: vue ^3.5.0 and zod ^4.0.0 . Quick Start Create a Catalog Define Registry with h() Render Functions Named Slots Use children for the "default" slot. Use the element's top level slots object for other slot names declared by the catalog: Registry components receive Vue native slot functions. Render them with slots.header?.() , slots.footer?.() , and so on. slots.default?.() renders the spec's children ; the children context field is a convenience alias for that rendered result. In the JSON spec, keep default content in children rather than adding a default entry to slots . Render Specs Providers Provider Purpose StateProvider Share state across components (JSON Pointer paths). Accepts initialState or store for controlled mode. ActionProvider Handle actions dispatched via the event system VisibilityProvider Enable conditional rendering based on state ValidationProvider Form field validation Composables Composable Purpose useStateStore() Access state context ( state as ShallowRef , get , set , update ) useStateValue(path) Get single value from state useIsVisible(condition) Check if a visibility condition is met useActions() Access action context useAction(binding) Get a single action dispatch function useFieldValidation(path, config) Field validation state useBoundProp(propValue, bindingPath) Two way binding for $bindState / $bindItem Note: useStateStore().state returns a ShallowRef<StateModel — use state.value to access. External Store (StateStore) Nested lists can set repeat.statePath to { "$item": "field" } inside an enclosing repeat. Pass a StateStore to StateProvider to wire json render to Pinia, VueUse, or any state management: Dynamic Prop Expressions Props support $state , $bindState , $cond , $template , $computed . Use { "$bindState": "/path" } on the natural value prop for two way binding. Visibility Conditions Built in Actions setState , pushState , removeState , and validateForm are built into the Vue schema and handled by ActionProvider : Event System Components use emit(event) to fire events, or on(event) for metadata ( shouldPreventDefault , bound ). Streaming useUIStream and useChatUI return Vue Refs for streaming specs from an API. BaseComponentProps For catalog agnostic reusable components: Key Exports Export Purpose defineRegistry Create a type safe component registry from a catalog Renderer Render a spec using a registry schema Element tree schema (from @json render/vue/schema ) StateProvider , ActionProvider , VisibilityProvider , ValidationProvider Context providers useStateStore , useStateValue , useBoundProp State composables useActions , useAction Action composables useFieldValidation , useIsVisible Validation and visibility useUIStream , useChatUI Streaming composables createStateStore Create in memory StateStore BaseComponentProps Catalog agnostic component props type