JSON Schema Based Form Generator For Vue.js

Install & Download:

Description:

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',
          },
        },
      }],
    };
  }
};