Press "Enter" to skip to content

A Schema-based Form Generator Component for Vue.js

vue-form-generator is a schema-based form generator component for Vue.js.

json form builder drag and drop, json schema form builder, json forms example, generate ui from json, form io json schema, json schema form playground, json form builder react


  • reactive forms based on schemas
  • multiple object editing
  • 21 field types
  • built-in validators
  • core & full bundles (41kb and 50kb gzipped)
  • Bootstrap friendly templates
  • customizable styles
  • can be extended easily with custom fields

How to make use of it:


$ npm install vue-form-generator


  <div class="panel-body">
    <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
import Vue from 'vue'
import VueFormGenerator from 'vue-form-generator'
import 'vue-form-generator/dist/vfg.css'


export default {
  data () {
    return {
      model: {
        id: 1,
        name: 'John Doe',
        password: 'J0hnD03!x4',
        skills: ['Javascript', 'VueJS'],
        email: '',
        status: true
      schema: {
        fields: [
            type: 'input',
            inputType: 'text',
            label: 'ID (disabled text field)',
            model: 'id',
            readonly: true,
            disabled: true
            type: 'input',
            inputType: 'text',
            label: 'Name',
            model: 'name',
            placeholder: 'Your name',
            featured: true,
            required: true
            type: 'input',
            inputType: 'password',
            label: 'Password',
            model: 'password',
            min: 6,
            required: true,
            hint: 'Minimum 6 characters',
            validator: VueFormGenerator.validators.string
            type: 'select',
            label: 'Skills',
            model: 'skills',
            values: ['Javascript', 'VueJS', 'CSS3', 'HTML5']
            type: 'input',
            inputType: 'email',
            label: 'E-mail',
            model: 'email',
            placeholder: 'User\'s e-mail address'
            type: 'checkbox',
            label: 'Status',
            model: 'status',
            default: true
      formOptions: {
        validateAfterLoad: true,
        validateAfterChanged: true,
        validateAsync: true

schema-based form builder, vue-form-generator Plugin/Github/Codepen, json schema form online

See Demo And Download

Official Website(vue-generators): Click Here

This superior jQuery/javascript plugin is developed by vue-generators. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.