vue by vercel-labs/json-render
npx skills add https://github.com/vercel-labs/json-render --skill vue一个 Vue 3 渲染器,可将 JSON 规范转换为具有数据绑定、可见性和操作功能的 Vue 组件树。
npm install @json-render/vue @json-render/core zod
对等依赖:vue ^3.5.0 和 zod ^4.0.0。
import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/vue/schema";
import { z } from "zod";
export const catalog = defineCatalog(schema, {
components: {
Card: {
props: z.object({ title: z.string(), description: z.string().nullable() }),
description: "一个卡片容器",
},
Button: {
props: z.object({ label: z.string(), action: z.string() }),
description: "一个可点击的按钮",
},
},
actions: {},
});
import { h } from "vue";
import { defineRegistry } from "@json-render/vue";
import { catalog } from "./catalog";
export const { registry } = defineRegistry(catalog, {
components: {
Card: ({ props, children }) =>
h("div", { class: "card" }, [
h("h3", null, props.title),
props.description ? h("p", null, props.description) : null,
children,
]),
Button: ({ props, emit }) =>
h("button", { onClick: () => emit("press") }, props.label),
},
});
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
<script setup lang="ts">
import { StateProvider, ActionProvider, Renderer } from "@json-render/vue";
import { registry } from "./registry";
const spec = { root: "card-1", elements: { /* ... */ } };
</script>
<template>
<StateProvider :initial-state="{ form: { name: '' } }">
<ActionProvider :handlers="{ submit: handleSubmit }">
<Renderer :spec="spec" :registry="registry" />
</ActionProvider>
</StateProvider>
</template>
| 提供者 | 用途 |
|---|---|
StateProvider | 跨组件共享状态(JSON Pointer 路径)。接受 initialState 或 store 用于受控模式。 |
ActionProvider | 处理通过事件系统分发的操作 |
VisibilityProvider | 根据状态启用条件渲染 |
ValidationProvider | 表单字段验证 |
| 组合式函数 | 用途 |
|---|---|
useStateStore() | 访问状态上下文(state 作为 ShallowRef,以及 get、set、update) |
useStateValue(path) | 从状态中获取单个值 |
useIsVisible(condition) | 检查是否满足可见性条件 |
useActions() | 访问操作上下文 |
useAction(binding) | 获取单个操作分发函数 |
useFieldValidation(path, config) | 字段验证状态 |
useBoundProp(propValue, bindingPath) | 用于 $bindState/$bindItem 的双向绑定 |
注意:useStateStore().state 返回一个 ShallowRef<StateModel> — 使用 state.value 来访问。
将 StateStore 传递给 StateProvider,以将 json-render 连接到 Pinia、VueUse 或任何状态管理库:
import { createStateStore, type StateStore } from "@json-render/vue";
const store = createStateStore({ count: 0 });
<StateProvider :store="store">
<Renderer :spec="spec" :registry="registry" />
</StateProvider>
属性支持 $state、$bindState、$cond、$template、$computed。在自然值属性上使用 { "$bindState": "/path" } 以实现双向绑定。
{ "$state": "/user/isAdmin" }
{ "$state": "/status", "eq": "active" }
{ "$state": "/maintenance", "not": true }
[ cond1, cond2 ] // 隐式 AND
setState、pushState、removeState 和 validateForm 已内置在 Vue 模式中,并由 ActionProvider 处理:
{
"action": "setState",
"params": { "statePath": "/activeTab", "value": "settings" }
}
组件使用 emit(event) 来触发事件,或使用 on(event) 获取元数据(shouldPreventDefault、bound)。
useUIStream 和 useChatUI 返回 Vue Refs,用于从 API 流式传输规范。
用于与目录无关的可复用组件:
import type { BaseComponentProps } from "@json-render/vue";
const Card = ({ props, children }: BaseComponentProps<{ title?: string }>) =>
h("div", null, [props.title, children]);
| 导出项 | 用途 |
|---|---|
defineRegistry | 从目录创建类型安全的组件注册表 |
Renderer | 使用注册表渲染规范 |
schema | 元素树模式(来自 @json-render/vue/schema) |
StateProvider、ActionProvider、VisibilityProvider、ValidationProvider | 上下文提供者 |
useStateStore、useStateValue、useBoundProp | 状态组合式函数 |
useActions、useAction | 操作组合式函数 |
useFieldValidation、useIsVisible | 验证和可见性组合式函数 |
useUIStream、useChatUI | 流式处理组合式函数 |
createStateStore | 创建内存中的 StateStore |
BaseComponentProps | 与目录无关的组件属性类型 |
每周安装量
169
代码仓库
GitHub 星标数
13.3K
首次出现
2026年3月7日
安全审计
已安装于
codex165
cursor163
gemini-cli162
amp162
cline162
github-copilot162
Vue 3 renderer that converts JSON specs into Vue component trees with data binding, visibility, and actions.
npm install @json-render/vue @json-render/core zod
Peer dependencies: vue ^3.5.0 and zod ^4.0.0.
import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/vue/schema";
import { z } from "zod";
export const catalog = defineCatalog(schema, {
components: {
Card: {
props: z.object({ title: z.string(), description: z.string().nullable() }),
description: "A card container",
},
Button: {
props: z.object({ label: z.string(), action: z.string() }),
description: "A clickable button",
},
},
actions: {},
});
import { h } from "vue";
import { defineRegistry } from "@json-render/vue";
import { catalog } from "./catalog";
export const { registry } = defineRegistry(catalog, {
components: {
Card: ({ props, children }) =>
h("div", { class: "card" }, [
h("h3", null, props.title),
props.description ? h("p", null, props.description) : null,
children,
]),
Button: ({ props, emit }) =>
h("button", { onClick: () => emit("press") }, props.label),
},
});
<script setup lang="ts">
import { StateProvider, ActionProvider, Renderer } from "@json-render/vue";
import { registry } from "./registry";
const spec = { root: "card-1", elements: { /* ... */ } };
</script>
<template>
<StateProvider :initial-state="{ form: { name: '' } }">
<ActionProvider :handlers="{ submit: handleSubmit }">
<Renderer :spec="spec" :registry="registry" />
</ActionProvider>
</StateProvider>
</template>
| 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 |
| 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 |
Note: useStateStore().state returns a ShallowRef<StateModel> — use state.value to access.
Pass a StateStore to StateProvider to wire json-render to Pinia, VueUse, or any state management:
import { createStateStore, type StateStore } from "@json-render/vue";
const store = createStateStore({ count: 0 });
<StateProvider :store="store">
<Renderer :spec="spec" :registry="registry" />
</StateProvider>
Props support $state, $bindState, $cond, $template, $computed. Use { "$bindState": "/path" } on the natural value prop for two-way binding.
{ "$state": "/user/isAdmin" }
{ "$state": "/status", "eq": "active" }
{ "$state": "/maintenance", "not": true }
[ cond1, cond2 ] // implicit AND
setState, pushState, removeState, and validateForm are built into the Vue schema and handled by ActionProvider:
{
"action": "setState",
"params": { "statePath": "/activeTab", "value": "settings" }
}
Components use emit(event) to fire events, or on(event) for metadata (shouldPreventDefault, bound).
useUIStream and useChatUI return Vue Refs for streaming specs from an API.
For catalog-agnostic reusable components:
import type { BaseComponentProps } from "@json-render/vue";
const Card = ({ props, children }: BaseComponentProps<{ title?: string }>) =>
h("div", null, [props.title, children]);
| 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 |
Weekly Installs
169
Repository
GitHub Stars
13.3K
First Seen
Mar 7, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex165
cursor163
gemini-cli162
amp162
cline162
github-copilot162
HeroUI v2 到 v3 迁移指南:破坏性变更、复合组件、Tailwind v4 升级
556 周安装
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 |
| 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 |