vue-form-generator

A schema-based form generator component for Vue.js v1.x.x

Vue v2.x is not supported!

Demo

JSFiddle simple example

Features

multiple objects editing
24 field types
built-in validators
Bootstrap friendly templates
customizable styles
...etc

Documentation

Online documentation on Gitbook

Dependencies

vue-form-generator use Moment.js and lodash internally.

While built-in fields don't need external dependencies, optional fields may need other libraries.
These dependency fall in two camp: jQuery or Vanilla. You can find almost the same functionality in both flavor.
That way, it's your choice to depend on jQuery or not.

You can find details about dependencies in documentation.

Installation

NPM

You can install it via NPM.

$ npm install vue-form-generator

Manual

Download zip package and unpack and add the vue-form-generator.css and vue-form-generator.js file to your project from dist folder.

https://github.com/icebob/vue-form-generator/archive/master.zip

Usage

<template>
  <div class="panel-body">
    <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
  </div>
</template>

<script>
import VueFormGenerator from "vue-form-generator";

Vue.use(VueFormGenerator);

export default {
  data: {
  
    model:             
      id: 1,
      name: "John Doe",
      password: "J0hnD03!x4",
      skills: ["Javascript", "VueJS"],
      email: "john.doe@gmail.com",
      status: true
    },
  
    schema: {
      fields: [{
        type: "text",
        label: "ID (disabled text field)",
        model: "id",
        readonly: true,         
        disabled: true
      },{
        type: "text",
        label: "Name",
        model: "name",
        placeholder: "Your name",
        featured: true,
        required: true
      },{
        type: "password",
        label: "Password",
        model: "password",
        min: 6,
        required: true,
        hint: "Minimum 6 characters",
        validator: validators.string
      },{
        type: "select",
        label: "skills",
        model: "type",      
        values: ["Javascript", "VueJS", "CSS3", "HTML5"]
      },{
        type: "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
    }
  }
}
</script>

Development

This command will start a webpack-dev-server with content of dev folder.

npm run dev

Build

This command will build a distributable version in the dist directory.

npm run build

Test

npm run test

TODO

sortable checkbox list
Groupable fields
Validation handling with multiple models

Contribution

Please send pull requests improving the usage and fixing bugs, improving documentation and providing better examples, or providing some testing, because these things are important.

License

vue-form-generator is available under the MIT license.

RaphaHsu / vue-form-generator