Gathering detailed insights and metrics for vue-form-generator
Gathering detailed insights and metrics for vue-form-generator
Gathering detailed insights and metrics for vue-form-generator
Gathering detailed insights and metrics for vue-form-generator
form-making
A designer and generator of form base on Vue.js, make form development simple and efficient.
jeeplus-form
A designer and generator of form base on Vue.js, make form development simple and efficient.
asset-form-making
A designer and generator of form base on Vue.js, make form development simple and efficient.
@jsonforms/vue
Vue 3 module of JSON Forms
npm install vue-form-generator
Typescript
Module System
Node Version
NPM Version
82.6
Supply Chain
100
Quality
79.7
Maintenance
100
Vulnerability
100
License
JavaScript (71.47%)
Vue (25.82%)
HTML (2.4%)
CSS (0.31%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
2,994 Stars
890 Commits
532 Forks
81 Watchers
29 Branches
30 Contributors
Updated on Jul 08, 2025
Latest Version
2.3.4
Package Id
vue-form-generator@2.3.4
Size
140.51 kB
NPM Version
6.4.1
Node Version
8.15.0
Published on
Feb 09, 2019
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
69
A schema-based form generator component for Vue.js.
Online documentation on Gitbook
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.
You can install it via NPM or yarn.
$ npm install vue-form-generator
$ npm install vue-form-generator@0.6.1
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
VueFormGenerator come in two version : core
and full
.
Core is a more minimal version with only half the fields.
Full is core + other fields.
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:
1// the "full" way 2<script> 3 import VueFormGenerator from "vue-form-generator"; 4 import "vue-form-generator/dist/vfg.css"; // optional full css additions 5</script> 6 7// the "core" way 8<script> 9 import VueFormGenerator from "vue-form-generator/dist/vfg-core.js"; 10 import "vue-form-generator/dist/vfg-core.css"; // optional core css additions 11</script>
1<template> 2 <div class="panel-body"> 3 <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator> 4 </div> 5</template> 6 7<script> 8import Vue from 'vue' 9import VueFormGenerator from 'vue-form-generator' 10import 'vue-form-generator/dist/vfg.css' 11 12Vue.use(VueFormGenerator) 13 14export default { 15 data () { 16 return { 17 model: { 18 id: 1, 19 name: 'John Doe', 20 password: 'J0hnD03!x4', 21 skills: ['Javascript', 'VueJS'], 22 email: 'john.doe@gmail.com', 23 status: true 24 }, 25 schema: { 26 fields: [ 27 { 28 type: 'input', 29 inputType: 'text', 30 label: 'ID (disabled text field)', 31 model: 'id', 32 readonly: true, 33 disabled: true 34 }, 35 { 36 type: 'input', 37 inputType: 'text', 38 label: 'Name', 39 model: 'name', 40 placeholder: 'Your name', 41 featured: true, 42 required: true 43 }, 44 { 45 type: 'input', 46 inputType: 'password', 47 label: 'Password', 48 model: 'password', 49 min: 6, 50 required: true, 51 hint: 'Minimum 6 characters', 52 validator: VueFormGenerator.validators.string 53 }, 54 { 55 type: 'select', 56 label: 'Skills', 57 model: 'skills', 58 values: ['Javascript', 'VueJS', 'CSS3', 'HTML5'] 59 }, 60 { 61 type: 'input', 62 inputType: 'email', 63 label: 'E-mail', 64 model: 'email', 65 placeholder: 'User\'s e-mail address' 66 }, 67 { 68 type: 'checkbox', 69 label: 'Status', 70 model: 'status', 71 default: true 72 } 73 ] 74 }, 75 formOptions: { 76 validateAfterLoad: true, 77 validateAfterChanged: true, 78 validateAsync: true 79 } 80 } 81 } 82} 83</script> 84
Usage in local components
1import VueFormGenerator from "vue-form-generator"; 2 3//component javascript 4export default { 5 components: { 6 "vue-form-generator": VueFormGenerator.component 7 } 8};
This command will start a webpack-dev-server
with content of dev
folder.
1npm run dev
This command will build a distributable version in the dist
directory.
1npm run build
1npm test
or
1npm run ci
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 !
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
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 8/15 approved changesets -- score normalized to 5
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
208 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-06-30
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More