Package Exports

@fext/vue-form-builder

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@fext/vue-form-builder) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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

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

Screen Capture

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

License

MIT