# vue-formly

> A simple and extendable form builder for Vue.js

Latest version **2.5.9** (published 2020-08-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-formly
pnpm add vue-formly
yarn add vue-formly
bun add vue-formly
```

## 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 | 2.5.9 |
| Published | 2020-08-02 |
| First published | 2016-08-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 133.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 234 |
| Maintainers | mattsanders |
| Keywords | vue, vuejs, form |

## Links

- npm: https://www.npmjs.com/package/vue-formly
- Repository: https://github.com/formly-js/vue-formly
- Homepage: https://github.com/formly-js/vue-formly#readme
- Issues: https://github.com/formly-js/vue-formly/issues
- npm.io page: https://npm.io/package/vue-formly

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.2.6
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.23.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.5.9 (latest) — 2020-08-02
- 2.5.8 — 2018-03-08
- 2.5.7 — 2018-01-22
- 2.5.6 — 2018-01-07
- 2.5.4 — 2017-12-17
- 2.5.3 — 2017-10-25
- 2.5.2 — 2017-10-25
- 2.5.1 — 2017-10-17
- 2.5.0 — 2017-10-12
- 2.4.6 — 2017-07-26
- 2.4.5 — 2017-06-27
- 2.4.4 — 2017-06-26
- 2.4.3 — 2017-06-20
- 2.4.2 — 2017-06-19
- 2.4.1 — 2017-06-15
- … 17 more at https://npm.io/package/vue-formly/versions

## README

# Vue Formly

Vue Formly is a JS based form builder heavily inspired by [Angular Formly](http://angular-formly.com/). Vue Formly was designed to provide an easy way to keep your forms consistent and to remove bloat from your code. As there's no "one way" to design your forms, Vue Formly allows you to create custom input types which you can use in your form schemas. Vue Formly itself does not come with any inputs pre-loaded but a set of Boostrap form inputs can be installed over at [Vue Formly Bootstrap](https://github.com/formly-js/vue-formly-bootstrap).

*NOTE*
This is version 2 of Vue Formly and is only compatible with Vue 2.x. If you are wanting to use this with Vue 1.x then check out the [Vue Formly 1 Branch](https://github.com/formly-js/vue-formly/tree/1.0).

## Installation
```
npm install vue-formly
```
Or via a script
```html
<script src="your_dir/vue-formly/vue-formly.min.js"></script>
```
## Usage
Take a look at the [docs](https://matt-sanders.gitbooks.io/vue-formly/content/v/2.0/) for extended information about using Formly and creating custom input types. But here is a quick example:
*NOTE* that for Vue Formly to work correctly you must also include a set of input types. You can either create your own or check out [Vue Formly Bootstrap](https://github.com/formly-js/vue-formly-bootstrap) which has many already created for you.
```html
<div id="app">
   <form @submit="handleSubmission">
      <formly-form :form="form" :model="model" :fields="fields"></formly-form>
      <button>Submit</button>
   </form>
</div>
```
```js
new Vue({
   el: '#app',
   data: {
      model: {
         name: '',
         email: '',
         password: ''
      },
      form: {},
      fields: [
         {
            key: 'name',
            type: 'input',
            required: true
         },
         {
            key: 'email',
            type: 'input',
            templateOptions: {
               type: 'email'
            },
            required: true,
            validators: {
               validEmail: checkEmailFunction
            }
         },
         {
            key: 'password',
            type: 'input',
            templateOptions: {
               type: 'password'
            },
            required: true,
            validators: {
               validPassword: checkPasswordFunction
            }
         }
      ]
   }
});
```

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