Vue

This is the Vue 3 renderer for json-render, which turns JSON specs into live Vue component trees with state management, data binding, and actions. You'd reach for it when building UIs from AI-generated or dynamic JSON specs instead of hardcoded templates. It ships with providers for state, actions, visibility, and validation, plus composables like useStateStore and useBoundProp for wiring everything up. The two-way binding support via $bindState and the ability to plug in external stores like Pinia makes it more flexible than a basic templating solution. It's opinionated about structure but gets out of your way once you've defined your component catalog and registry.

skills.sh installs: 1.4K
GitHub stars: 19.5K
last updated: Aug 21, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

@json-render/vue

Vue 3 renderer that converts JSON specs into Vue component trees with data binding, visibility, and actions.

Installation

npm install @json-render/vue @json-render/core zod

Peer dependencies: vue ^3.5.0 and zod ^4.0.0.

Quick Start

Create a Catalog

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

import { h } from "vue";
import { defineRegistry } from "@json-render/vue";
import { catalog } from "./catalog";

SKILL.md on GitHub

Details

Repository: github.com/vercel-labs/json-render
Categories: Frontend Development, AI & Agent Building, Cloud & Infrastructure
First seen: May 16, 2026

Vue