JSON Schema Based Form Generator For Vue.js

A JSON schema based form generator that works with any Vue component or HTML element.


  • Supports any HTML element or Vue component
  • Super lightbox
  • Standardized¬†JSON schema¬†for annotation and validation
  • Layout is independent from data structure
  • Condition logic.
  • Nested form fields.
  • Async loading.
  • With form validation.

How to use it:

1. Import and register the form generator.

import Vue from 'vue';
import VueFormJsonSchema from 'vue-form-json-schema';
Vue.component('vue-form-json-schema', VueFormJsonSchema);

2. Add the vue-form-json-schema component to the app and generate a basic input.

export default {
  data() {
    return {
      // An object which holds the form values
      model: {},
      // A valid JSON Schema object
      schema: {
        type: 'object',
        properties: {
          firstName: {
            type: 'string',
      // Array of HTML elements or Vue components
      uiSchema: [{
        component: 'input',
        model: 'firstName',
        // Same API as [Vue's render functions](https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth)
        fieldOptions: {
          class: ['form-control'],
          on: ['input'],
          attrs: {
            placeholder: 'Please enter your first name',


JSON Schema Based Form Generator For Vue.js

Download Details:

Author: jarvelov

Live Demo: https://py6611pr9m.codesandbox.io/

Download Link: https://github.com/jarvelov/vue-form-json-schema/archive/refs/heads/master.zip

Official Website: https://github.com/jarvelov/vue-form-json-schema

Install & Download:

Add Comment