skills.rest
jeje-it
jeje-itCOMMUNITY
Explore all skills by this author →
GitHub

vue

Renders Vue 3 component trees from JSON specs with state binding and actions.

Updated Aug 2, 2026
Search Tags:#vue#zod#render#json-render#component registry#state binding#ai-generated ui
One-click install
npx skills add https://github.com/jeje-it/template-projet --skill vue-jeje-it
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue
Source: https://github.com/jeje-it/template-projet/tree/main/.agents/skills/vue
Command: npx skills add https://github.com/jeje-it/template-projet --skill vue-jeje-it

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @json-render/vue, @json-render/core, zod, vue.

What problem does it solve? Building dynamic, AI-generated user interfaces in Vue 3 requires manually translating JSON specifications into component trees, wiring state, and handling actions. This Skill provides the @json-render/vue renderer that converts JSON specs directly into interactive Vue components with data binding, visibility rules, and validation. ## Core Features & Use Cases - JSON-to-Vue Rendering: Define a component catalog with Zod schemas and render specs through the Renderer component with typed registries. - State & Action Management: Use StateProvider, ActionProvider, and composables like useStateStore and useBoundProp for two-way binding and built-in actions such as setState and validateForm. - Streaming & External Stores: Stream specs from an API with useUIStream and useChatUI, or connect Pinia and VueUse stores via createStateStore. - Use Case: An AI assistant generates a dashboard spec as JSON; you render it live in a Vue 3 app with form validation, conditional visibility, and action handlers without writing template code. ## Quick Start Ask the AI to build a Vue 3 interface from a JSON spec using @json-render/vue with a catalog, registry, and Renderer component.

Frequently Asked Questions about vue

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render JSON specs as Vue 3 components?▼

Define a catalog with defineCatalog from @json-render/core, create a registry with defineRegistry using h() render functions, then pass the spec and registry to the Renderer component wrapped in StateProvider and ActionProvider.

How to add two-way data binding in json-render Vue components?▼

Use the $bindState dynamic prop expression on the natural value prop of a component, pointing to a JSON Pointer path like /form/name. The useBoundProp composable handles the two-way synchronization with the state store.

Does @json-render/vue work with Pinia or external state stores?▼

Yes, create a StateStore with createStateStore and pass it to StateProvider via the store prop. This wires json-render state to Pinia, VueUse, or any compatible state management solution.

What Vue and Zod versions does @json-render/vue require?▼

The library requires Vue 3.5 or higher and Zod 4.0 or higher as peer dependencies. Install it alongside @json-render/core and zod via npm.

How do I stream AI-generated UI specs into a Vue app?▼

Use the useUIStream or useChatUI composables, which return Vue Refs that update as spec chunks arrive from an API. Pass the streamed spec to the Renderer for progressive rendering.

Related Skills

Explore More Software Engineering Skills→
hasnaxyzhasnaxyz

core

Define schemas and catalogs for generating AI-driven UI specifications.

Official
Advanced
canyouseeuscanyouseeus

verify-schema

Identify and report schema and legacy-column mismatches in Supabase databases.

Community
Intermediate
TencentBlueKingTencentBlueKing
840

chat-x-unit-test

Writes Vitest unit tests for Vue 3 components with mocking patterns.

Official
Intermediate
inpinitiinpiniti

vue

Convert JSON specs into Vue 3 component trees with data binding and actions.

Community
Intermediate