Skip to content
📋 A schema-based form generator component for Vue.js
Branch: master
Clone or download
Latest commit 62d4a7e Feb 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build #535, #526 - reversed "deep property path" fix Oct 23, 2018
dev Fix Rawgit shut down Oct 18, 2018
dist 2.3.4 releases Feb 7, 2019
examples Rename fieldFile to fieldUpload. Oct 12, 2017
src Merge pull request #581 from SuPenguin/patch-1 Feb 7, 2019
test/unit updated abstractField test, seems the `field.formOptions` wasn't bein… Dec 21, 2018
.babelrc Work on the code coverage Feb 28, 2018
.bumpedrc setup automate releasing Mar 9, 2018
.editorconfig Update configuration and dependency Feb 15, 2018
.eslintignore Update to Webpack 3. Almost all dependency are updated. Reorganisatio… Dec 6, 2017
.eslintrc.js Correction of build and small corrections Mar 5, 2018
.gitattributes Initial commit Apr 27, 2016
.gitignore Work on the code coverage Feb 28, 2018
.npmignore Initial commit Apr 27, 2016
.travis.yml Fix travis Sep 17, 2018
CHANGELOG.md 2.3.4 releases Feb 7, 2019
ISSUE_TEMPLATE.md Add issue and PR template Mar 14, 2018
LICENSE Create LICENSE Apr 28, 2016
PULL_REQUEST_TEMPLATE.md
README.md Add vfg-field-matrix into the readme Jan 29, 2019
bower.json 2.3.4 releases Feb 7, 2019
package-lock.json updated package-lock with latest deps Feb 7, 2019
package.json 2.3.4 releases Feb 7, 2019
yarn.lock Bumped node-sass@4.9.0 for Node 10 Compatibility Jun 19, 2018

README.md

vue-form-generator NPM version VueJS v2.x compatible

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

Codacy Badge Build Status Coverage Status NPMS.io score Package Quality FOSSA Status

Dependency Status devDependency Status Downloads

Demo

JSFiddle simple example

CodePen simple example

Screenshot

Features

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

Documentation

Online documentation on Gitbook

Dependencies

vue-form-generator uses fecha and lodash internally.

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

You can find details about dependencies in the official documentation under each specific component.

Installation

NPM

You can install it via NPM or yarn.

Latest version for Vue 2.x

$ npm install vue-form-generator

Legacy version for Vue 1.0.x

$ npm install vue-form-generator@0.6.1

Manual

Download zip package and unpack and add the vfg.css and vfg.js file to your project from dist folder.

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

Core vs Full version

VueFormGenerator come in two version : core and full. Core is a more minimal version with only half the fields. Full is core + other fields.

  • Full bundle: 75 kB (gzipped: 19 kB)
  • Core bundle: 39 kB (gzipped: 11 kB)

If you don't know what to choose, don't worry, the full is the default version. If you want the slim down version, here is the changes:

// the "full" way
<script>
  import VueFormGenerator from "vue-form-generator";
  import "vue-form-generator/dist/vfg.css";  // optional full css additions
</script>

// the "core" way
<script>
  import VueFormGenerator from "vue-form-generator/dist/vfg-core.js";
  import "vue-form-generator/dist/vfg-core.css";  // optional core css additions
</script>

Usage

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

<script>
import Vue from 'vue'
import VueFormGenerator from 'vue-form-generator'
import 'vue-form-generator/dist/vfg.css'

Vue.use(VueFormGenerator)

export default {
  data () {
    return {
      model: {
        id: 1,
        name: 'John Doe',
        password: 'J0hnD03!x4',
        skills: ['Javascript', 'VueJS'],
        email: 'john.doe@gmail.com',
        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
      }
    }
  }
}
</script>

Usage in local components

import VueFormGenerator from "vue-form-generator";

//component javascript
export default {
	components: {
		"vue-form-generator": VueFormGenerator.component
	}
};

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 test

or

npm run ci

More fields new

VueFormGenerator supports custom fields. If you decide to release your custom field into the wild, please open a new issue so we can add you to a list here! Please try to use this naming convention for your custom field : vfg-field-* Example :

  • vfg-field-myfield
  • vfg-field-calendar
  • vfg-field-awesome-dropdown

This way, it will be easier for everyone to find it. Thank you !

Public Custom Fields

  • vue-tel-input - International Telephone Input Boilerplate with Vue (integrated with VueFormGenerator).
  • vfg-field-sourcecode - A source code field for vue-form-generator
  • vfg-field-array - A vue-form-generator field to handle arrays of items of any type.
  • vfg-field-object - A vue-form-generator field to handle objects, with or without schemas.
  • vfg-field-matrix - A matrix field for vue-form-generator.

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.

Contact

Copyright (C) 2017 Icebob

@icebob @icebob

You can’t perform that action at this time.