# el-form-builder

> Build element-ui forms with JavaScript Object.

Latest version **1.3.1** (published 2020-09-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install el-form-builder
pnpm add el-form-builder
yarn add el-form-builder
bun add el-form-builder
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.1 |
| Published | 2020-09-08 |
| First published | 2020-09-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | felixpy |
| Maintainers | lee88688 |
| Keywords | vue, element, form, builder, json |

## Links

- npm: https://www.npmjs.com/package/el-form-builder
- Repository: https://github.com/lee88688/el-form-builder
- Homepage: https://github.com/lee88688/el-form-builder#readme
- Issues: https://github.com/lee88688/el-form-builder/issues
- npm.io page: https://npm.io/package/el-form-builder

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.3.1 (latest) — 2020-09-08
- 1.3.0 — 2020-09-08

## README

# el-form-builder

<!-- [![Version](https://img.shields.io/npm/v/element-form-builder.svg)](https://www.npmjs.com/package/element-form-builder)
[![License](https://img.shields.io/npm/l/element-form-builder.svg)](https://www.npmjs.com/package/element-form-builder)
[![Dependencies](https://img.shields.io/david/codetrial/element-form-builder.svg)](https://www.npmjs.com/package/element-form-builder) -->

This project focks from [Vue Form Builder](https://github.com/openfext/vue-form-builder).Build element-ui forms with javascript objects.

:us: English | [:cn: 简体中文](README.zh-CN.md)

## Example

[:zap: Live Preview](https://element-form-builder.now.sh) | [:book: Docs](https://codetrial.github.io/element-form-builder)

![Screen Capture](.github/preview.gif)

## Quick Start

First you need to have an element-ui project. If not, it is recommended to create one quickly using the preset below.

```bash
vue create --preset codetrial/vue-cli-plugin-element your-project
```

### Install

```bash
yarn add el-form-builder
# OR
npm i el-form-builder
```

### Registry

```javascript
import ElFormBuilder from 'el-form-builder'

Vue.use(FormBuilder)
```

### Witness the miracle moment

Vue template:

```html
<el-form-builder :config="formConfig" v-model="formValues" label-width="80px">
</el-form-builder>
```

Vue component:

```javascript
export default {
  data() {
    return {
      formValues: {
        title: 'Some Awesome Title'
      },

      formConfig: {
        rules: {
          title: [{ required: true, message: 'Please enter the title' }]
        },
        elements: [
          {
            tag: 'el-input',
            item: {
              label: 'Title'
            },
            detail: {
              name: 'title'
            }
          }
        ]
      }
    }
  }
}
```

## Core Features

- :camera: Any Component
- :tv: Form Validation
- :watch: Form Model
- :radio: Custom Slot

## Contributing

Looking forward to your pull requests.

## Built With

- [Vue.js](https://github.com/vuejs/vue)
- [ElementUI](https://github.com/ElemeFE/element)

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2018 - present, Felix Yang

---
_Source: https://npm.io/package/el-form-builder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._