JSON Schema Based Form Generator For Vue.js

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

Features:

  • 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.

<template>
  <vue-form-json-schema
    v-model="model"
    :schema="schema"
    :ui-schema="uiSchema"
  >
</vue-form-json-schema>
</template>
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',
          },
        },
      }],
    };
  }
};

Preview:

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