@fext/vue-form-builder

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

⚡ Live Preview | 📖 Element UI Storybook | 📖 View UI Storybook | 📖 Ant Design Storybook

Core Features

• 📺 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

Docs

Complete API Reference

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

• Vue.js
• Vue Use
• ElementUI
• View UI
• Ant Design Vue

License

MIT

Copyright (c) 2018 - present, Felix Yang