json-schema-form-vue3
TypeScript icon, indicating that this package has built-in type declarations

0.4.1 • Public • Published

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

npm 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

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

2. Use in Your Component

You can use the component in two ways:

Global Registration

import { createApp } from 'vue'
import JsonSchemaFormVue3 from 'json-schema-form-vue3'
import 'json-schema-form-vue3/style.css'  // Don't forget to import styles

const app = createApp(App)
app.use(JsonSchemaFormVue3)

Then in your components:

<template>
  <json-schema-form v-model="schema" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { JsonSchema } from 'json-schema-form-vue3'

const schema = ref<JsonSchema>({
  type: 'object',
  properties: {
    name: {
      type: 'string',
      title: 'Name'
    },
    age: {
      type: 'number',
      title: 'Age'
    },
    hobbies: {
      type: 'array',
      title: 'Hobbies',
      items: {
        type: 'string'
      }
    },
    address: {
      type: 'object',
      title: 'Address',
      properties: {
        street: {
          type: 'string',
          title: 'Street'
        },
        city: {
          type: 'string',
          title: 'City'
        }
      }
    }
  },
  required: ['name', 'age']
})
</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

interface SchemaProperty {
  type: JSONSchema7TypeName; // 'string' | 'number' | 'integer' | 'object' | 'array' | 'boolean' | 'null'
  title?: string;
  description?: string;
  properties?: Record<string, SchemaProperty>;
  items?: SchemaProperty;
  required?: string[];
}

interface JsonSchema {
  type: 'object';
  properties: Record<string, SchemaProperty>;
  required?: string[];
  $schema?: string;
  $id?: string;
  $comment?: string;
  title?: string;
  description?: string;
}

Advanced Usage

Nested Objects Example

<template>
  <json-schema-form v-model="schema" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import JsonSchemaForm from 'json-schema-form-vue3'
import type { JsonSchema } from 'json-schema-form-vue3'

const schema = ref<JsonSchema>({
  type: 'object',
  properties: {
    user: {
      type: 'object',
      title: 'User Information',
      properties: {
        basicInfo: {
          type: 'object',
          title: 'Basic Information',
          properties: {
            name: {
              type: 'string',
              title: 'Name'
            },
            age: {
              type: 'number',
              title: 'Age'
            }
          },
          required: ['name']
        },
        contact: {
          type: 'object',
          title: 'Contact Information',
          properties: {
            email: {
              type: 'string',
              title: 'Email'
            },
            phone: {
              type: 'string',
              title: 'Phone'
            }
          }
        }
      }
    }
  }
})
</script>

Array Type Example

<template>
  <json-schema-form v-model="schema" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import JsonSchemaForm from 'json-schema-form-vue3'
import type { JsonSchema } from 'json-schema-form-vue3'

const schema = ref<JsonSchema>({
  type: 'object',
  properties: {
    tags: {
      type: 'array',
      title: 'Tags',
      items: {
        type: 'string'
      }
    },
    contacts: {
      type: 'array',
      title: 'Contacts',
      items: {
        type: 'object',
        properties: {
          name: {
            type: 'string',
            title: 'Name'
          },
          phone: {
            type: 'string',
            title: 'Phone'
          }
        }
      }
    }
  }
})
</script>

Development

Build from source:

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

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

Package Sidebar

Install

npm i json-schema-form-vue3

Weekly Downloads

21

Version

0.4.1

License

MIT

Unpacked Size

39.2 kB

Total Files

8

Last publish

Collaborators

  • heichong