A schema-based form generator component for Vue.js v1.x.x
Vue v2.x is not supported!
- multiple objects editing
- 21 field types
- built-in validators
- customizable styles
- ...etc
Online documentation on Gitbook
- Moment.js (built-in)
- lodash (built-in)
- BootStrap & jQuery (optional)
- bootstrap-select for
selectExfields (optional) - bootstrap-datetimepicker for
datetimefields (optional) - spectrum for
spectrumcolor picker fields (optional) - maskedinput for
maskedfields - ion.rangeSlider for range slider fields
You can install it via NPM.
$ npm install vue-form-generator
Download zip package and unpack and add the vue-form-generator.css and vue-form-generator.js file to your project from dist folder.
https://github.com/icebob/vue-form-generator/archive/master.zip
<template>
<div class="panel-body">
<vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
</div>
</template>
<script>
import VueFormGenerator from "vue-form-generator";
Vue.use(VueFormGenerator);
export default {
data: {
schema: { ... },
model: {
id: 1,
name: "John Doe",
password: "J0hnD03!x4",
skills: ["Javascript", "VueJS"],
email: "[email protected]",
status: true
},
formOptions: {
validateAfterLoad: true,
validateAfterChanged: true
}
}
}
</script>{
fields: [{
type: "text",
label: "ID",
model: "id",
readonly: true,
featured: false,
disabled: true
}, {
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",
validator: VueFormGenerator.validators.email
}, {
type: "checklist",
label: "Skills",
model: "skills",
multi: true,
required: true,
multiSelect: true,
values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"]
}, {
type: "switch",
label: "Status",
model: "status",
multi: true,
default: true,
textOn: "Active",
textOff: "Inactive"
}]
}This command will start a webpack-dev-server with content of dev folder.
npm run devThis command will build a distributable version in the dist directory.
npm run buildnpm run test- sortable checkbox list
- Groupable fields
- Validation handling with multiple models
- Bundle for vendor files
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) 2016 Icebob
