@fext/vue-form-builder
v2.1.0
Published
Build powerful vue form with JSON schema and composition api.
Downloads
12
Maintainers
Readme
Vue Form Builder
Build powerful vue form with JSON schema and composition api. Any custom input components and popular ui frameworks such as Element UI , View UI, Ant Design Vue are supported.
Example
:zap: Live Preview | :book: Element UI Storybook | :book: View UI Storybook | :book: Ant Design Storybook
Core Features
- :tv: Powerful - use composition api to manage complex form state
- :camera: Flexible - support any custom input components
- :watch: Adaptable - different ui frameworks can be used out of the box through the adapters
- :radio: Reliable - has been used in multiple applications in the production environment
Docs
Quick Start
Let ’s take Element UI as an example, first you need a vue application like Vue Admin Next.
Install
npm i @fext/vue-form-builder
Registration
Global Registration
import FormBuilder from '@fext/vue-form-builder';
import ElFormAdaptor from '@fext/vue-form-builder/lib/adaptor/element';
Vue.use(FormBuilder); // form-builder
Vue.use(ElFormAdaptor); // el-form-adaptor
Local Registration
Use the factory method based on the specified component:
import { createFormBuilder } from '@fext/vue-form-builder';
import { ElFormAdaptor } from '@fext/vue-form-builder/lib/adaptor/element';
import AwesomeFormComponents from 'path/to/awesome/components';
export default {
name: 'awesome-form'
components: {
FormBuilder: createFormBuilder({
components: {
ElFormAdaptor,
...AwesomeFormComponents
}
})
},
}
Build Form
Vue template:
<el-form>
<form-builder :form="form" :config="formConfig"></form-builder>
</el-form>
Vue component:
import { useForm } from '@fext/vue-use';
export default {
components: {
FormBuilder: createFormBuilder({
components: {
ElFormAdaptor
}
})
},
setup() {
const form = useForm();
return {
form
};
},
data() {
return {
formConfig: [
{
component: 'div',
fields: [
{
name: 'comment',
component: 'ElFormAdaptor',
label: 'Normal Input',
rules: {
required: true
},
props: {
placeholder: 'Render with el-input component'
}
}
]
}
]
};
}
};
Built With
License
Copyright (c) 2018 - present, Felix Yang