{"id":13429195,"url":"https://github.com/vue-generators/vue-form-generator","last_synced_at":"2025-05-14T03:08:54.412Z","repository":{"id":26890063,"uuid":"57243275","full_name":"vue-generators/vue-form-generator","owner":"vue-generators","description":":clipboard: A schema-based form generator component for Vue.js","archived":false,"fork":false,"pushed_at":"2023-01-11T20:26:18.000Z","size":7065,"stargazers_count":2993,"open_issues_count":144,"forks_count":533,"subscribers_count":81,"default_branch":"master","last_synced_at":"2025-05-12T22:39:06.209Z","etag":null,"topics":["form","generator","schema","vue","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vue-generators.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-27T19:54:13.000Z","updated_at":"2025-05-10T04:44:15.000Z","dependencies_parsed_at":"2022-07-20T14:17:43.842Z","dependency_job_id":null,"html_url":"https://github.com/vue-generators/vue-form-generator","commit_stats":null,"previous_names":["icebob/vue-form-generator"],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-generators%2Fvue-form-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-generators%2Fvue-form-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-generators%2Fvue-form-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-generators%2Fvue-form-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vue-generators","download_url":"https://codeload.github.com/vue-generators/vue-form-generator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254059507,"owners_count":22007768,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form","generator","schema","vue","vuejs2"],"created_at":"2024-07-31T02:00:29.745Z","updated_at":"2025-05-14T03:08:54.376Z","avatar_url":"https://github.com/vue-generators.png","language":"JavaScript","funding_links":[],"categories":["Awesome Vue.js","JavaScript","vue","Components \u0026 Libraries","UI Components [🔝](#readme)","UI Utilities"],"sub_categories":["Development Tools","UI Components","Form"],"readme":"# vue-form-generator [![NPM version](https://img.shields.io/npm/v/vue-form-generator.svg)](https://www.npmjs.com/package/vue-form-generator) ![VueJS v2.x compatible](https://img.shields.io/badge/vue%202.x-compatible-green.svg)\n\nA schema-based form generator component for Vue.js.\n\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/d27be05a35bf459b9292b8172e314a08)](https://www.codacy.com/app/mereg-norbert/vue-form-generator_2?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=vue-generators/vue-form-generator\u0026utm_campaign=Badge_Grade)\n[![Build Status](https://travis-ci.org/vue-generators/vue-form-generator.svg?branch=master)](https://travis-ci.org/vue-generators/vue-form-generator)\n[![Coverage Status](https://coveralls.io/repos/github/vue-generators/vue-form-generator/badge.svg?branch=master)](https://coveralls.io/github/vue-generators/vue-form-generator?branch=master)\n[![NPMS.io score](https://badges.npms.io/vue-form-generator.svg)]()\n[![Package Quality](http://npm.packagequality.com/shield/vue-form-generator.svg)](http://packagequality.com/#?package=vue-form-generator)\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fvue-generators%2Fvue-form-generator.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fvue-generators%2Fvue-form-generator?ref=badge_shield)\n\n[![Dependency Status](https://david-dm.org/vue-generators/vue-form-generator.svg)](https://david-dm.org/vue-generators/vue-form-generator)\n[![devDependency Status](https://david-dm.org/vue-generators/vue-form-generator/dev-status.svg)](https://david-dm.org/vue-generators/vue-form-generator#info=devDependencies)\n[![Downloads](https://img.shields.io/npm/dm/vue-form-generator.svg)](https://www.npmjs.com/package/vue-form-generator)\n\n## Demo\n\n[JSFiddle simple example](https://jsfiddle.net/zoul0813/d8excp36/)\n\n[CodePen simple example](https://codepen.io/zoul0813/pen/OrNVNw)\n\n[![Screenshot](https://github.com/vue-generators/vue-form-generator-docs/raw/master/assets/vfg-example1.png)](https://jsfiddle.net/zoul0813/d8excp36/)\n\n## Features\n\n*   reactive forms based on schemas\n*   multiple object editing\n*   21 field types\n*   built-in validators\n*   core \u0026 full bundles (41kb and 50kb gzipped)\n*   Bootstrap friendly templates\n*   customizable styles\n*   can be extended easily with custom fields\n*   ...etc\n\n## Documentation\n\n[Online documentation on Gitbook](https://vue-generators.gitbook.io/vue-generators/)\n\n## Dependencies\n\nvue-form-generator uses [fecha](https://github.com/taylorhakes/fecha) and [lodash](https://lodash.com/) internally.\n\nWhile built-in fields don't need external dependencies, optional fields may need other libraries.\nThese dependencies fall into two camps: jQuery or Vanilla. You can find almost the same functionality in both flavors.\nIn the end, it's your choice to depend on jQuery or not.\n\nYou can find details about dependencies in the official [documentation](https://vue-generators.gitbook.io/vue-generators/) under each specific component.\n\n## Installation\n\n### NPM\n\nYou can install it via [NPM](http://npmjs.org/) or [yarn](https://yarnpkg.com/).\n\n#### Latest version for Vue 2.x\n\n```\n$ npm install vue-form-generator\n```\n\n#### Legacy version for Vue 1.0.x\n\n```\n$ npm install vue-form-generator@0.6.1\n```\n\n### Manual\n\nDownload zip package and unpack and add the vfg.css and vfg.js file to your project from dist folder.\n\n```\nhttps://github.com/vue-generators/vue-form-generator/archive/master.zip\n```\n\n### Core vs Full version\n\nVueFormGenerator come in two version : `core` and `full`.\nCore is a more minimal version with only half the fields.\nFull is core + other fields.\n\n*   Full bundle: 172 kB (gzipped: 50 kB)\n*   Core bundle: 146 kB (gzipped: 41 kB)\n\nIf you don't know what to choose, don't worry, the full is the default version.\nIf you want the slim down version, here is the changes:\n\n```js\n// the \"full\" way\n\u003cscript\u003e\n  import VueFormGenerator from \"vue-form-generator\";\n  import \"vue-form-generator/dist/vfg.css\";  // optional full css additions\n\u003c/script\u003e\n\n// the \"core\" way\n\u003cscript\u003e\n  import VueFormGenerator from \"vue-form-generator/dist/vfg-core.js\";\n  import \"vue-form-generator/dist/vfg-core.css\";  // optional core css additions\n\u003c/script\u003e\n```\n\n## Usage\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv class=\"panel-body\"\u003e\n    \u003cvue-form-generator :schema=\"schema\" :model=\"model\" :options=\"formOptions\"\u003e\u003c/vue-form-generator\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport Vue from 'vue'\nimport VueFormGenerator from 'vue-form-generator'\nimport 'vue-form-generator/dist/vfg.css'\n\nVue.use(VueFormGenerator)\n\nexport default {\n  data () {\n    return {\n      model: {\n        id: 1,\n        name: 'John Doe',\n        password: 'J0hnD03!x4',\n        skills: ['Javascript', 'VueJS'],\n        email: 'john.doe@gmail.com',\n        status: true\n      },\n      schema: {\n        fields: [\n          {\n            type: 'input',\n            inputType: 'text',\n            label: 'ID (disabled text field)',\n            model: 'id',\n            readonly: true,\n            disabled: true\n          },\n          {\n            type: 'input',\n            inputType: 'text',\n            label: 'Name',\n            model: 'name',\n            placeholder: 'Your name',\n            featured: true,\n            required: true\n          },\n          {\n            type: 'input',\n            inputType: 'password',\n            label: 'Password',\n            model: 'password',\n            min: 6,\n            required: true,\n            hint: 'Minimum 6 characters',\n            validator: VueFormGenerator.validators.string\n          },\n          {\n            type: 'select',\n            label: 'Skills',\n            model: 'skills',\n            values: ['Javascript', 'VueJS', 'CSS3', 'HTML5']\n          },\n          {\n            type: 'input',\n            inputType: 'email',\n            label: 'E-mail',\n            model: 'email',\n            placeholder: 'User\\'s e-mail address'\n          },\n          {\n            type: 'checkbox',\n            label: 'Status',\n            model: 'status',\n            default: true\n          }\n        ]\n      },\n      formOptions: {\n        validateAfterLoad: true,\n        validateAfterChanged: true,\n        validateAsync: true\n      }\n    }\n  }\n}\n\u003c/script\u003e\n\n```\n\nUsage in local components\n\n```js\nimport VueFormGenerator from \"vue-form-generator\";\n\n//component javascript\nexport default {\n\tcomponents: {\n\t\t\"vue-form-generator\": VueFormGenerator.component\n\t}\n};\n```\n\n## Development\n\nThis command will start a `webpack-dev-server` with content of `dev` folder.\n\n```bash\nnpm run dev\n```\n\n## Build\n\nThis command will build a distributable version in the `dist` directory.\n\n```bash\nnpm run build\n```\n\n## Test\n\n```bash\nnpm test\n```\n\nor\n\n```bash\nnpm run ci\n```\n\n## More fields _new_\n\nVueFormGenerator 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 :\n\n*   `vfg-field-myfield`\n*   `vfg-field-calendar`\n*   `vfg-field-awesome-dropdown`\n\nThis way, it will be easier for everyone to find it. Thank you !\n\n### Public Custom Fields\n\n* [vue-tel-input](https://github.com/EducationLink/vue-tel-input) - International Telephone Input Boilerplate with Vue (integrated with VueFormGenerator).\n* [vfg-field-sourcecode](https://github.com/gwenaelp/vfg-field-sourcecode) - A source code field for vue-form-generator\n* [vfg-field-array](https://github.com/gwenaelp/vfg-field-array) - A vue-form-generator field to handle arrays of items of any type.\n* [vfg-field-object](https://github.com/gwenaelp/vfg-field-object) - A vue-form-generator field to handle objects, with or without schemas.\n* [vfg-field-matrix](https://github.com/shwld/vfg-field-matrix) - A matrix field for vue-form-generator.\n\n## Contribution\n\nPlease send pull requests improving the usage and fixing bugs, improving documentation and providing better examples, or providing some testing, because these things are important.\n\n## License\n\nvue-form-generator is available under the [MIT license](https://tldrlegal.com/license/mit-license).\n\n## Contact\n\nCopyright (C) 2017 Icebob\n\n[![@icebob](https://img.shields.io/badge/github-icebob-green.svg)](https://github.com/icebob) [![@icebob](https://img.shields.io/badge/twitter-Icebobcsi-blue.svg)](https://twitter.com/Icebobcsi)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-generators%2Fvue-form-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvue-generators%2Fvue-form-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-generators%2Fvue-form-generator/lists"}