A schema-based form generator component for Vue.js.
- 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
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.
Latest version for Vue 2.x
$ npm install vue-form-generator
Legacy version for Vue 1.0.x
$ npm install email@example.com
Download zip package and unpack and add the vfg.css and vfg.js file to your project from dist folder.
Core vs Full version
VueFormGenerator come in two version :
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>;; // optional full css additions</script>// the "core" way<script>;; // optional core css additions</script>
Usage in local components
This command will start a
webpack-dev-server with content of
npm run dev
This command will build a distributable version in the
npm run build
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 :
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.
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.
vue-form-generator is available under the MIT license.
Copyright (C) 2017 Icebob