https://github.com/form-for-vue/ffv
Form For Vue
https://github.com/form-for-vue/ffv
form form-generator json-schema vue
Last synced: 5 months ago
JSON representation
Form For Vue
- Host: GitHub
- URL: https://github.com/form-for-vue/ffv
- Owner: form-for-vue
- License: mit
- Created: 2017-08-22T09:13:11.000Z (almost 9 years ago)
- Default Branch: dev
- Last Pushed: 2018-07-04T15:56:34.000Z (almost 8 years ago)
- Last Synced: 2026-01-13T20:21:34.000Z (5 months ago)
- Topics: form, form-generator, json-schema, vue
- Language: JavaScript
- Homepage:
- Size: 329 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# FFV
[](https://www.npmjs.com/package/ffv) [](https://vuejs.org/)
> Form For Vue
Generate form based on standard `json-schema` and customize it using `ui-schema`
## Installation
```bash
npm install --save ffv
```
## Usage
### Bundler (Webpack, Rollup)
```js
import Vue from 'vue'
import Ffv from 'ffv'
Vue.use(Ffv)
```
### Browser
```html
```
### Form initialization
```html
export default {
data() {
return {
schema: {
"type": "object",
"title": "Basic Form",
"required": [
"firstName",
"lastName",
],
"properties": {
"firstName": {
"type": "string",
"title": "First name"
},
"lastName": {
"type": "string",
"title": "Last name"
}
}
},
value: null,
}
}
}
```
### UiSchema
uiSchema for jsonSchema is just like what css is for HTML. We use it to instruct
ffv how we want our form to be seen. To customize each prop pass available options for
that widget in `ui:options` of that prop.
```javascript
const schema = {
type: "object",
properties: {
firstName: {
type: "string",
},
lastName: {
type: "string",
}
}
}
const uiSchema = {
firstName: {
"ui:options": {
...
}
},
lastName: {
"ui:options": {
...
}
}
}
```
### Widgets
`ffv` has a very flexible approach in using widgets and props, in fact it simply add
form functionality such as validation to components of your own or built-in `ffv` components.
you can pass your own widgets or props based on `ffv` template or use built-in widgets and props.
built-in components are listed below
#### widget options
* checkbox
* file
* input
* radio
* select
* text-area
## Development
### Build
Bundle the js and css of to the `dist` folder:
```bash
npm run build
```
## Publishing
The `prepublish` hook will ensure dist files are created before publishing. This
way you don't need to commit them in your repository.
```bash
# Bump the version first
# It'll also commit it and create a tag
npm version
# Push the bumped package and tags
git push --follow-tags
# Ship it 🚀
npm publish
```
## License
[MIT](http://opensource.org/licenses/MIT)