# @vue-formily/formily

> Simple, lightweight, and flexible schema-based form for Vue.js

Latest version **1.0.0-alpha.13** (published 2021-09-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vue-formily/formily
pnpm add @vue-formily/formily
yarn add @vue-formily/formily
bun add @vue-formily/formily
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-alpha.13 |
| Published | 2021-09-28 |
| First published | 2021-08-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 126.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 29 |
| Author | An Ha |
| Maintainers | anha |
| Keywords | vue, validation, form, schema |

## Links

- npm: https://www.npmjs.com/package/@vue-formily/formily
- Repository: https://github.com/vue-formily/formily
- Homepage: https://vue-formily.netlify.app
- Issues: https://github.com/vue-formily/formily/issues
- npm.io page: https://npm.io/package/@vue-formily/formily

## Dependencies (1)

- [@vue-formily/util](https://npm.io/package/@vue-formily/util.md) ^0.1.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

- 1.0.0-alpha.13 (latest) — 2021-09-28
- 2.0.0-beta.8 (next) — 2026-09-24
- 2.0.0-alpha.9 (v2-alpha) — 2022-02-03
- 1.0.0-alpha.16 (v1-alpha) — 2022-02-03
- 1.0.0-alpha.11 (alpha) — 2021-09-08
- 1.0.0-alpha.5 (alpha.5) — 2021-09-05
- 1.0.0-alpha.4 (alpha.4) — 2021-09-04
- 1.0.0-alpha.3 (alpha.3) — 2021-09-02
- 1.0.0-alpha.2 (alpha.2) — 2021-08-30
- 1.0.0-alpha.1 (alpha.1) — 2021-08-29
- 2.0.0-beta.7 — 2026-09-24
- 2.0.0-beta.6 — 2024-10-31
- 2.0.0-beta.5 — 2024-05-05
- 2.0.0-beta.4 — 2024-05-05
- 2.0.0-beta.3 — 2024-05-05
- … 28 more at https://npm.io/package/@vue-formily/formily/versions

## README

<p align="center">
  <a href="#" target="_blank">
    <img width="320" src="./.github/logo.png">
  </a>
</p>
<br>

Simple, lightweight, and flexible schema-based form for Vue.js

## Features
**🧽&nbsp;&nbsp;Flexible:** Easily to handle from basic to nested forms, group of forms...

**⚙️&nbsp;&nbsp;Dynamically:** Generate form components dynamically.

**📝&nbsp;&nbsp;Schema:** Build faster form by schema.

**🐜&nbsp;&nbsp;Lightweight:** Small built size. Gzip: ~5 KB

**✅&nbsp;&nbsp;Validation:** Validate form elements with built-in Rules that covers most needs in most web applications

**🧩&nbsp;&nbsp;Plugins:** Extend functionally by third-party plugins or your own plugins.

**🌵&nbsp;&nbsp;Extensibility:** Easily to make your own custom form element by extending the core elements.

## Links
- [📚 &nbsp; Documentation](https://vue-formily.netlify.app)

## Installation

### CDN
You can use **vue-formily** with a script tag and a CDN, import the library like this:

```html
<script src="https://unpkg.com/@vue-formily/formily@latest"></script>
```

This will inject a `VueFormily` global object, which you will use to access the various components, funtions exposed by **vue-formily**.

If you are using native ES Modules, there is also an ES Modules compatible build:

```html
<script type="module">
  import Vue from 'https://unpkg.com/@vue-formily/formily@latest/dist/formily.esm.js'
</script>
```

### NPM
```sh
# install with yarn
yarn add @vue-formily/formily

# install with npm
npm install @vue-formily/formily --save
```

### Set Up

### Vue 3.x
```typescript
import { createApp } from 'vue'
import { createFormily } from '@vue-formily/formily';

const formily = createFormily();

const app = createApp(App)

app.use(formily, {
  // By default, vue-formily will execute the 
  // validation silently when changing element's value.
  // To disable it, just set the `silent` to `false`.
  // When disabled, the element has to be validated manually 
  // by calling the `element.validate()` method.
  silent?: boolean;
  // The default rules want to apply to the form.
  // With rules that have the `cascade = true`,
  // then thay can apply to all the child elements.
  rules: [];
  // The alias of the object contains all the form references
  // that will be injected to Vue instance
  alias: 'forms';
});
```

#### Vue 2.x
```typescript
import Vue from 'vue';
import VueFormily from '@vue-formily/formily';

Vue.use(VueFormily, {
  // By default, vue-formily will execute the 
  // validation silently when changing element's value.
  // To disable it, just set the `silent` to `false`.
  // When disabled, the element has to be validated manually 
  // by calling the `element.validate()` method.
  silent?: boolean;
  // The default rules want to apply to the form.
  // With rules that have the `cascade = true`,
  // then thay can apply to all the child elements.
  rules: [];
  // The alias of the object contains all the form references
  // that will be injected to Vue instance
  alias: 'forms';
});
```

### Vue Version Support

The main v2 version supports Vue 3.x only, for previous versions of Vue, check the following the table

| Vue Version | vue-formily version |
| ----------- | ------------------- |
| `2.x`       | `1.x` |
| `3.x`       | `2.x` |


## Basic Usage
Let's start with a simple login form:

### Defining Form Schema
`vue-formily` need a form schema to work with, so let's define one:

```js
const loginForm = {
  formId: "login",
  fields: [
    {
      formId: "email",
      type: "string",
      rules: [
        {
          ...required,
          message: "Please enter email address.",
        },
        {
          ...email,
          message: "Please enter valid email address.",
        },
      ],
      props: {
        label: "email",
        inputType: "email"
      },
    },
    {
      formId: "password",
      type: "string",
      rules: [
        {
          ...required,
          message: "Please enter password.",
        },
      ],
      props: {
        label: "password",
        inputType: "password"
      },
    },
  ],
};
```

### Create New Form
Then we call [`$formily.add`](https://vue-formily.netlify.app/api/extension#addform) to create new form element and injects it to Vue instance's `forms` object.

```html
<template>
  <form class="login">
    <div v-for="(field, i) in forms.login.fields" :key="i" class="field">
      <label :for="field._uid">{{ field.label }}</label>
      <input v-model="field.raw" :type="field.props.inputType" :name="field.name" :id="field._uid" />
    </div>
  </form>
</template>

<script>
export default {
  created() {
    // Create new form element and injects it to `forms` object.
    this.$formily.add(loginForm);
  }
}
</script>
```

Here is the [live demo](https://vue-formily.netlify.app/getting%20started/basic-usage#live-demo).


## Contributing

You are welcome to contribute to this project, but before you do, please make sure you read the [Contributing Guide](.github/CONTRIBUTING.md).

## License

[MIT](./LICENSE)

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