Vue Form Generator

Vue Form Generator is a schema-based form generator component for Vue.js. Using this component creating forms will be a breeze.

Features

  • multiple objects editing
  • 19 built-in field types
  • built-in validators
  • Bootstrap friendly templates
  • Validators
  • and more...

Usage

To use it, you have to provide a schema with an array of the fields you need and the model you want to bind with the form. Additional, you can provide some options.

The supported fields are:

  • text - Simple text input field
  • email - E-mail address input field
  • password - Password input field
  • number - Number input field
  • textArea - Text area field
  • checkbox - Checkbox for boolean values
  • select - Select list
  • color - Color picker (built-in HTML5 control)
  • checklist - Checkbox list to select multiple values
  • range - Range slider (built-in HTML5 control)
  • image - Image select field (URL or upload in base64 string)
  • label - Static text (e.g. timestamp, creation time...etc)
  • switch - Switch field (toggle two values (on/off, yes/no, active/inactive)

Example

<h1 class="text-center">Demo Form</h1>
<div class="container" id="app">
    <div class="panel panel-default">
        <div class="panel-heading">Form</div>
        <div class="panel-body">
            <vue-form-generator :schema="schema"
                        :model="model"
                        :options="formOptions">
            </vue-form-generator>
        </div>
    </div>
</div>
new Vue({
    el: "#app",
    components: {
        "vue-form-generator": VueFormGenerator.component
    },
    data: {
        model: {
            name: "John Doe",
            password: "J0hnD03!x4",
            email: "john.doe@gmail.com",
            status: true
        },
        schema: {
            fields: [ {
                type: "text",
                label: "Name",
                model: "name",
                readonly: false,
                featured: true,
                required: true,
                disabled: false,
                placeholder: "User's name",
                validator: VueFormGenerator.validators.string
            }, {
                type: "password",
                label: "Password",
                model: "password",
                min: 6,
                required: true,
                hint: "Minimum 6 characters",
                validator: VueFormGenerator.validators.string
            }, {
                type: "email",
                label: "E-mail",
                model: "email",
                placeholder: "User's e-mail address",
                validator: VueFormGenerator.validators.email
            }, {
               type: "switch",
                label: "Status",
                model: "status",
                multi: true,
                default: true,
                textOn: "Active",
                textOff: "Inactive"
            }]
        },

        formOptions: {
            validateAfterLoad: true,
            validateAfterChanged: true
        }
    }
});

The above example will generate this form:

form output

Notice how easily vue-form-generator validates the desired fields, email and strings, using validator: VueFormGenerator.validators.email.

Currently, it comes with a set of handy validators such as email, string, number, date, and more.

You can view a more detailed usage example on JSFiddle.

If you are interested in using vue-form-generator take a look at the documentation. The source code is available on GitHub.