vue

Name: vue
Author: vercel-labs

923installs849forks

How to install vue?

vercel-labs/json-render/vue

$npx -y skills add vercel-labs/json-render --skill vue

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# @json-render/vue
2
3	Vue 3 renderer that converts JSON specs into Vue component trees with data binding, visibility, and actions.
4
5	## Installation
6
7	```bash
8	npm install @json-render/vue @json-render/core zod
9	```
10
11	Peer dependencies: `vue ^3.5.0` and `zod ^4.0.0`.
12
13	## Quick Start
14
15	### Create a Catalog
16
17	```typescript
18	import { defineCatalog } from "@json-render/core";
19	import { schema } from "@json-render/vue/schema";
20	import { z } from "zod";
21
22	export const catalog = defineCatalog(schema, {
23	components: {
24	Card: {
25	props: z.object({ title: z.string(), description: z.string().nullable() }),
26	description: "A card container",
27	},
28	Button: {
29	props: z.object({ label: z.string(), action: z.string() }),
30	description: "A clickable button",
31	},
32	},
33	actions: {},
34	});
35	```
36
37	### Define Registry with h() Render Functions
38
39	```typescript
40	import { h } from "vue";
41	import { defineRegistry } from "@json-render/vue";
42	import { catalog } from "./catalog";
43
44	export const { registry } = defineRegistry(catalog, {
45	components: {
46	Card: ({ props, children }) =>
47	h("div", { class: "card" }, [
48	h("h3", null, props.title),
49	props.description ? h("p", null, props.description) : null,
50	children,
51	]),
52	Button: ({ props, emit }) =>
53	h("button", { onClick: () => emit("press") }, props.label),
54	},
55	});
56	```
57
58	### Render Specs
59
60	```vue
61	<script setup lang="ts">
62	import { StateProvider, ActionProvider, Renderer } from "@json-render/vue";
63	import { registry } from "./registry";
64
65	const spec = { root: "card-1", elements: { /* ... */ } };
66	</script>
67
68	<template>
69	<StateProvider :initial-state="{ form: { name: '' } }">
70	<ActionProvider :handlers="{ submit: handleSubmit }">
71	<Renderer :spec="spec" :registry="registry" />
72	</ActionProvider>
73	</StateProvider>
74	</template>
75	```
76
77	## Providers
78
79	\| Provider \| Purpose \|
80	\|----------\|---------\|
81	\| `StateProvider` \| Share state across components (JSON Pointer paths). Accepts `initialState` or `store` for controlled mode. \|
82	\| `ActionProvider` \| Handle actions dispatched via the event system \|
83	\| `VisibilityProvider` \| Enable conditional rendering based on state \|
84	\| `ValidationProvider` \| Form field validation \|
85
86	## Composables
87
88	\| Composable \| Purpose \|
89	\|------------\|---------\|
90	\| `useStateStore()` \| Access state context (`state` as `ShallowRef`, `get`, `set`, `update`) \|
91	\| `useStateValue(path)` \| Get single value from state \|
92	\| `useIsVisible(condition)` \| Check if a visibility condition is met \|
93	\| `useActions()` \| Access action context \|
94	\| `useAction(binding)` \| Get a single action dispatch function \|
95	\| `useFieldValidation(path, config)` \| Field validation state \|
96	\| `useBoundProp(propValue, bindingPath)` \| Two-way binding for `$bindState`/`$bindItem` \|
97
98	Note: `useStateStore().state` returns a `ShallowRef<StateModel>` — use `state.value` to access.
99
100	## External Store (StateStore)
101
102	Pass a `StateStore` to `StateProvider` to wire json-render to Pinia, VueUse, or any state management:
103
104	```typescript
105	import { createStateStore, type StateStore } from "@json-render/vue";
106
107	const store = createStateStore({ count: 0 });
108	```
109
110	```vue
111	<StateProvider :store="store">
112	<Renderer :spec="spec" :registry="registry" />
113	</StateProvider>
114	```
115
116	## Dynamic Prop Expressions
117
118	Props support `$state`, `$bindState`, `$cond`, `$template`, `$computed`. Use `{ "$bindState": "/path" }` on the natural value prop for two-way binding.
119
120	## Visibility Conditions
121
122	```typescript
123	{ "$state": "/user/isAdmin" }
124	{ "$state": "/status", "eq": "active" }
125	{ "$state": "/maintenance", "not": true }
126	[ cond1, cond2 ] // implicit AND
127	```
128
129	## Built-in Actions
130
131	`setState`, `pushState`, `removeState`, and `validateForm` are built into the Vue schema and handled by `ActionProvider`:
132
133	```json
134	{
135	"action": "setState",
136	"params": { "statePath": "/activeTab", "value": "settings" }
137	}
138	```
139
140	## Event System
141
142	Components use `emit(event)` to fire events, or `on(event)` for metadata (`shouldPreventDefault`, `bound`).
143
144	## Streaming
145
146	`useUIStream` and `useChatUI` return Vue Refs for streaming specs from an API.
147
148	## BaseComponentProps
149
150	For catalog-agnostic reusable components:
151
152	```typescript
153	import type { BaseComponentProps } from "@json-render/vue";
154
155	const Card = ({ props, children }: BaseComponentProps<{ title?: string }>) =>
156	h("div", null, [props.title, children]);
157	```
158
159	## Key Exports
160
161	\| Export \| Purpose \|
162	\|--------\|---------\|
163	\| `defineRegistry` \| Create a type-safe component registry from a catalog \|
164	\| `Renderer` \| Render a spec using a registry \|
165	\| `schema` \| Element tree schema (from `@json-render/vue/schema`) \|
166	\| `StateProvider`, `ActionProvider`, `VisibilityProvider`, `ValidationProvider` \| Context providers \|
167	\| `useStateStore`, `useStateValue`, `useBoundProp` \| State composables \|
168	\| `useActio

People who liked this also viewed

6 picks

Type

find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 20262.6M27k
grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026633k182k
vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026573k29k
improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026522k182k
setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026454k182k
triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026424k182k

vue

923installs849forks

View on GitHub

How to install vue?

vercel-labs/json-render/vue

$npx -y skills add vercel-labs/json-render --skill vue

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# @json-render/vue
2
3	Vue 3 renderer that converts JSON specs into Vue component trees with data binding, visibility, and actions.
4
5	## Installation
6
7	```bash
8	npm install @json-render/vue @json-render/core zod
9	```
10
11	Peer dependencies: `vue ^3.5.0` and `zod ^4.0.0`.
12
13	## Quick Start
14
15	### Create a Catalog
16
17	```typescript
18	import { defineCatalog } from "@json-render/core";
19	import { schema } from "@json-render/vue/schema";
20	import { z } from "zod";
21
22	export const catalog = defineCatalog(schema, {
23	components: {
24	Card: {
25	props: z.object({ title: z.string(), description: z.string().nullable() }),
26	description: "A card container",
27	},
28	Button: {
29	props: z.object({ label: z.string(), action: z.string() }),
30	description: "A clickable button",
31	},
32	},
33	actions: {},
34	});
35	```
36
37	### Define Registry with h() Render Functions
38
39	```typescript
40	import { h } from "vue";
41	import { defineRegistry } from "@json-render/vue";
42	import { catalog } from "./catalog";
43
44	export const { registry } = defineRegistry(catalog, {
45	components: {
46	Card: ({ props, children }) =>
47	h("div", { class: "card" }, [
48	h("h3", null, props.title),
49	props.description ? h("p", null, props.description) : null,
50	children,
51	]),
52	Button: ({ props, emit }) =>
53	h("button", { onClick: () => emit("press") }, props.label),
54	},
55	});
56	```
57
58	### Render Specs
59
60	```vue
61	<script setup lang="ts">
62	import { StateProvider, ActionProvider, Renderer } from "@json-render/vue";
63	import { registry } from "./registry";
64
65	const spec = { root: "card-1", elements: { /* ... */ } };
66	</script>
67
68	<template>
69	<StateProvider :initial-state="{ form: { name: '' } }">
70	<ActionProvider :handlers="{ submit: handleSubmit }">
71	<Renderer :spec="spec" :registry="registry" />
72	</ActionProvider>
73	</StateProvider>
74	</template>
75	```
76
77	## Providers
78
79	\| Provider \| Purpose \|
80	\|----------\|---------\|
81	\| `StateProvider` \| Share state across components (JSON Pointer paths). Accepts `initialState` or `store` for controlled mode. \|
82	\| `ActionProvider` \| Handle actions dispatched via the event system \|
83	\| `VisibilityProvider` \| Enable conditional rendering based on state \|
84	\| `ValidationProvider` \| Form field validation \|
85
86	## Composables
87
88	\| Composable \| Purpose \|
89	\|------------\|---------\|
90	\| `useStateStore()` \| Access state context (`state` as `ShallowRef`, `get`, `set`, `update`) \|
91	\| `useStateValue(path)` \| Get single value from state \|
92	\| `useIsVisible(condition)` \| Check if a visibility condition is met \|
93	\| `useActions()` \| Access action context \|
94	\| `useAction(binding)` \| Get a single action dispatch function \|
95	\| `useFieldValidation(path, config)` \| Field validation state \|
96	\| `useBoundProp(propValue, bindingPath)` \| Two-way binding for `$bindState`/`$bindItem` \|
97
98	Note: `useStateStore().state` returns a `ShallowRef<StateModel>` — use `state.value` to access.
99
100	## External Store (StateStore)
101
102	Pass a `StateStore` to `StateProvider` to wire json-render to Pinia, VueUse, or any state management:
103
104	```typescript
105	import { createStateStore, type StateStore } from "@json-render/vue";
106
107	const store = createStateStore({ count: 0 });
108	```
109
110	```vue
111	<StateProvider :store="store">
112	<Renderer :spec="spec" :registry="registry" />
113	</StateProvider>
114	```
115
116	## Dynamic Prop Expressions
117
118	Props support `$state`, `$bindState`, `$cond`, `$template`, `$computed`. Use `{ "$bindState": "/path" }` on the natural value prop for two-way binding.
119
120	## Visibility Conditions
121
122	```typescript
123	{ "$state": "/user/isAdmin" }
124	{ "$state": "/status", "eq": "active" }
125	{ "$state": "/maintenance", "not": true }
126	[ cond1, cond2 ] // implicit AND
127	```
128
129	## Built-in Actions
130
131	`setState`, `pushState`, `removeState`, and `validateForm` are built into the Vue schema and handled by `ActionProvider`:
132
133	```json
134	{
135	"action": "setState",
136	"params": { "statePath": "/activeTab", "value": "settings" }
137	}
138	```
139
140	## Event System
141
142	Components use `emit(event)` to fire events, or `on(event)` for metadata (`shouldPreventDefault`, `bound`).
143
144	## Streaming
145
146	`useUIStream` and `useChatUI` return Vue Refs for streaming specs from an API.
147
148	## BaseComponentProps
149
150	For catalog-agnostic reusable components:
151
152	```typescript
153	import type { BaseComponentProps } from "@json-render/vue";
154
155	const Card = ({ props, children }: BaseComponentProps<{ title?: string }>) =>
156	h("div", null, [props.title, children]);
157	```
158
159	## Key Exports
160
161	\| Export \| Purpose \|
162	\|--------\|---------\|
163	\| `defineRegistry` \| Create a type-safe component registry from a catalog \|
164	\| `Renderer` \| Render a spec using a registry \|
165	\| `schema` \| Element tree schema (from `@json-render/vue/schema`) \|
166	\| `StateProvider`, `ActionProvider`, `VisibilityProvider`, `ValidationProvider` \| Context providers \|
167	\| `useStateStore`, `useStateValue`, `useBoundProp` \| State composables \|
168	\| `useActio

People who liked this also viewed

6 picks

Type