Vue

作者 vercel-labsfc2a696a50a3無授權條款18K 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫昨天更新

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.

精選僅含說明Software Development

AI 產生的概覽

介紹 @json-render/vue 的參考指南，這是一套將 JSON 規格轉換為 Vue 元件樹的 Vue 3 渲染器。

功能: 此技能說明 @json-render/vue，這是一套 Vue 3 渲染器，可將 JSON 規格轉換為帶有資料綁定、可見性條件與動作的 Vue 元件樹。內容示範如何以 Zod schema 定義 catalog、用 Vue h() 渲染函式建立元件登錄表，並透過 StateProvider、ActionProvider、VisibilityProvider、ValidationProvider 等 provider 渲染規格。也涵蓋組合式函式、具名插槽、動態 prop 運算式、內建動作、事件系統、串流輔助函式以及外部狀態儲存。
適用情境: 適用於從 JSON 規格建構 Vue UI、使用 @json-render/vue、定義 Vue 元件登錄表，或在 Vue 中渲染 AI 產生的規格。它是給整合此渲染器的開發者參考，而非任務工作流程。
執行需求: 需要 npm 套件 @json-render/vue、@json-render/core 與 zod，以及對等相依套件 vue ^3.5.0 和 zod ^4.0.0。不附帶指令碼，僅為文件。

@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

typescript

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() }),      slots: ["default"],      description: "A card container",    },    Layout: {      props: z.object({}),      slots: ["default", "header", "footer"],      description: "Layout with named content regions",    },    Button: {      props: z.object({ label: z.string(), action: z.string() }),      description: "A clickable button",    },  },  actions: {},});

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() }),      slots: ["default"],      description: "A card container",    },    Layout: {      props: z.object({}),      slots: ["default", "header", "footer"],      description: "Layout with named content regions",    },    Button: {      props: z.object({ label: z.string(), action: z.string() }),      description: "A clickable button",    },  },  actions: {},});

Define Registry with h() Render Functions

typescript

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,      ]),    Layout: ({ slots }) =>      h("div", null, [        h("header", null, slots.header?.()),        h("main", null, slots.default?.()),        h("footer", null, slots.footer?.()),      ]),    Button: ({ props, emit }) =>      h("button", { onClick: () => emit("press") }, props.label),  },});

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,      ]),    Layout: ({ slots }) =>      h("div", null, [        h("header", null, slots.header?.()),        h("main", null, slots.default?.()),        h("footer", null, slots.footer?.()),      ]),    Button: ({ props, emit }) =>      h("button", { onClick: () => emit("press") }, props.label),  },});

Named Slots

Use children for the "default" slot. Use the element's top-level slots object for other slot names declared by the catalog:

json

{  "type": "Layout",  "props": {},  "children": ["main"],  "slots": {    "header": ["heading"],    "footer": ["actions"]  }}

{  "type": "Layout",  "props": {},  "children": ["main"],  "slots": {    "header": ["heading"],    "footer": ["actions"]  }}

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

vue

<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>

<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>

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:

typescript

import { createStateStore, type StateStore } from "@json-render/vue";
const store = createStateStore({ count: 0 });

import { createStateStore, type StateStore } from "@json-render/vue";
const store = createStateStore({ count: 0 });

Dynamic Prop Expressions

Props support $state, $bindState, $cond, $template, $computed. Use { "$bindState": "/path" } on the natural value prop for two-way binding.

Visibility Conditions

typescript

{ "$state": "/user/isAdmin" }{ "$state": "/status", "eq": "active" }{ "$state": "/maintenance", "not": true }[ cond1, cond2 ]  // implicit AND

{ "$state": "/user/isAdmin" }{ "$state": "/status", "eq": "active" }{ "$state": "/maintenance", "not": true }[ cond1, cond2 ]  // implicit AND

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:

typescript

import type { BaseComponentProps } from "@json-render/vue";
const Card = ({ props, children }: BaseComponentProps<{ title?: string }>) =>  h("div", null, [props.title, children]);

import type { BaseComponentProps } from "@json-render/vue";
const Card = ({ props, children }: BaseComponentProps<{ title?: string }>) =>  h("div", null, [props.title, children]);

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

來源與署名

來源：vercel-labs/json-render位於skills/vue提交fc2a696

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Vue

@json-render/vue

Installation

Quick Start

Create a Catalog

Define Registry with h() Render Functions

Named Slots

Render Specs

Providers

Composables

External Store (StateStore)

Dynamic Prop Expressions

Visibility Conditions

Built-in Actions

Event System

Streaming

BaseComponentProps

Key Exports

來源與署名

更多來自 vercel-labs/json-render 的技能

Remotion

Zustand

Svelte

Xstate

Solid

Shadcn Svelte

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices