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.
⚡ Live Preview | 📖 Element UI Storybook | 📖 View UI Storybook | 📖 Ant Design Storybook
- 📺 Powerful - use composition api to manage complex form state
- 📷 Flexible - support any custom input components
- ⌚ Adaptable - different ui frameworks can be used out of the box through the adapters
- 📻 Reliable - has been used in multiple applications in the production environment
Let ’s take Element UI as an example, first you need a vue application like Vue Admin Next.
npm i @fext/vue-form-builderimport 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-adaptorUse 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 } }) }, }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' } } ] } ] }; } };Copyright (c) 2018 - present, Felix Yang