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.


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


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)


<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"
new Vue({
    el: "#app",
    components: {
        "vue-form-generator": VueFormGenerator.component
    data: {
        model: {
            name: "John Doe",
            password: "J0hnD03!x4",
            email: "",
            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",
            }, {
               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:

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.