JSON Schema Form Vue3 + Element Plus

A Vue 3 component for editing JSON Schema with nested object and array support, built with Element Plus.

中文文档

Installation

1npm install @json-schema-form-vue3

Features

• Support for all JSON Schema types
• Nested object properties
• Array type with customizable item types
• Clean and modern UI with Element Plus
• Full TypeScript support
• Easy to use v-model interface

Quick Start

1. Install Dependencies

1npm install json-schema-form-vue3 element-plus

2. Use in Your Component

You can use the component in two ways:

Global Registration

1import { createApp } from 'vue'
2import JsonSchemaFormVue3 from 'json-schema-form-vue3'
3import 'json-schema-form-vue3/style.css'  // Don't forget to import styles
4
5const app = createApp(App)
6app.use(JsonSchemaFormVue3)

Then in your components:

1<template>
2  <json-schema-form v-model="schema" />
3</template>
4
5<script setup lang="ts">
6import { ref } from 'vue'
7import type { JsonSchema } from 'json-schema-form-vue3'
8
9const schema = ref<JsonSchema>({
10  type: 'object',
11  properties: {
12    name: {
13      type: 'string',
14      title: 'Name'
15    },
16    age: {
17      type: 'number',
18      title: 'Age'
19    },
20    hobbies: {
21      type: 'array',
22      title: 'Hobbies',
23      items: {
24        type: 'string'
25      }
26    },
27    address: {
28      type: 'object',
29      title: 'Address',
30      properties: {
31        street: {
32          type: 'string',
33          title: 'Street'
34        },
35        city: {
36          type: 'string',
37          title: 'City'
38        }
39      }
40    }
41  },
42  required: ['name', 'age']
43})
44</script>

Component API

Props

Property	Type	Required	Default	Description
modelValue	JsonSchema | SchemaProperty	Yes	-	The JSON Schema object bound through v-model
isRootLevel	boolean	No	true	Whether this is a root level editor (affects UI display)

Events

Event Name	Parameter Type	Description
update:modelValue	JsonSchema | SchemaProperty	Emitted when the schema changes

Type Definitions

1interface SchemaProperty {
2  type: JSONSchema7TypeName; // 'string' | 'number' | 'integer' | 'object' | 'array' | 'boolean' | 'null'
3  title?: string;
4  description?: string;
5  properties?: Record<string, SchemaProperty>;
6  items?: SchemaProperty;
7  required?: string[];
8}
9
10interface JsonSchema {
11  type: 'object';
12  properties: Record<string, SchemaProperty>;
13  required?: string[];
14  $schema?: string;
15  $id?: string;
16  $comment?: string;
17  title?: string;
18  description?: string;
19}

Advanced Usage

Nested Objects Example

1<template>
2  <json-schema-form v-model="schema" />
3</template>
4
5<script setup lang="ts">
6import { ref } from 'vue'
7import JsonSchemaForm from 'json-schema-form-vue3'
8import type { JsonSchema } from 'json-schema-form-vue3'
9
10const schema = ref<JsonSchema>({
11  type: 'object',
12  properties: {
13    user: {
14      type: 'object',
15      title: 'User Information',
16      properties: {
17        basicInfo: {
18          type: 'object',
19          title: 'Basic Information',
20          properties: {
21            name: {
22              type: 'string',
23              title: 'Name'
24            },
25            age: {
26              type: 'number',
27              title: 'Age'
28            }
29          },
30          required: ['name']
31        },
32        contact: {
33          type: 'object',
34          title: 'Contact Information',
35          properties: {
36            email: {
37              type: 'string',
38              title: 'Email'
39            },
40            phone: {
41              type: 'string',
42              title: 'Phone'
43            }
44          }
45        }
46      }
47    }
48  }
49})
50</script>

Array Type Example

1<template>
2  <json-schema-form v-model="schema" />
3</template>
4
5<script setup lang="ts">
6import { ref } from 'vue'
7import JsonSchemaForm from 'json-schema-form-vue3'
8import type { JsonSchema } from 'json-schema-form-vue3'
9
10const schema = ref<JsonSchema>({
11  type: 'object',
12  properties: {
13    tags: {
14      type: 'array',
15      title: 'Tags',
16      items: {
17        type: 'string'
18      }
19    },
20    contacts: {
21      type: 'array',
22      title: 'Contacts',
23      items: {
24        type: 'object',
25        properties: {
26          name: {
27            type: 'string',
28            title: 'Name'
29          },
30          phone: {
31            type: 'string',
32            title: 'Phone'
33          }
34        }
35      }
36    }
37  }
38})
39</script>

Development

Build from source:

1git clone <repository-url>
2cd json-schema-form-vue3
3npm install
4npm run build

For more information about Vue 3 TypeScript project setup, visit Vue Docs TypeScript Guide.