https://github.com/kevinzhang19870314/v-formly-v3
v-formly-v3 是 vue 3 的动态（JSON 驱动）表单库。 JSON powered / Dynamic forms for Vue 3
https://github.com/kevinzhang19870314/v-formly-v3
ajv ajv-validation ant ant-design-vue antdesign dynamic dynamic-forms element element-plus element-ui form form-validation json json-schema v-formly v-formly-v3 vue vue-3 vue-formly vuejs
Last synced: 2 months ago
JSON representation
v-formly-v3 是 vue 3 的动态（JSON 驱动）表单库。 JSON powered / Dynamic forms for Vue 3
- Host: GitHub
- URL: https://github.com/kevinzhang19870314/v-formly-v3
- Owner: KevinZhang19870314
- License: mit
- Created: 2022-10-17T01:43:19.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-12-09T01:40:07.000Z (over 2 years ago)
- Last Synced: 2025-04-10T21:15:36.602Z (2 months ago)
- Topics: ajv, ajv-validation, ant, ant-design-vue, antdesign, dynamic, dynamic-forms, element, element-plus, element-ui, form, form-validation, json, json-schema, v-formly, v-formly-v3, vue, vue-3, vue-formly, vuejs
- Language: Vue
- Homepage: https://kevinzhang19870314.github.io/v-formly-v3/zh/
- Size: 3.29 MB
- Stars: 20
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.en-us.md
Awesome Lists containing this project
README
# v-formly-v3
**Languages: English (this file), [中文](README.md).**
[v-formly-v3](https://kevinzhang19870314.github.io/v-formly-v3/zh/) is a dynamic (JSON driven) form library for vue 3.
Simplicity
Generate complex dynamic forms and validation through standard JSON Schema & Ajv Validator, which is fast, concise and efficient.
Reusability
Generate a form template in the form of JSON, and which can be reused in multiple places with simple modification! Enables you to quickly develop form pages. Compared with writing traditional forms, using JSON to define forms can greatly improve development efficiency.
Vue Power
Currently supports Vue 3.x, component library supportsantdv v3 & element-plus, other UI libraries (DevUI, etc.) support for Vue 3.x are under development. . .
## Quick start
### Docmentation & Demo
[Introduction](https://juejin.cn/post/7161591837407805476/)
[Document](https://kevinzhang19870314.github.io/v-formly-v3/zh/)
[Stackblitz antdv](https://stackblitz.com/edit/github-r1j1ut?file=src%2FApp.vue)，
[CodeSandbox antdv](https://codesandbox.io/s/nifty-sea-93ycqy)
[Stackblitz element](https://stackblitz.com/edit/github-r1j1ut-ejddhf?file=src%2FApp.vue)，
[CodeSandbox element](https://codesandbox.io/s/nifty-sea-vb5h6v)
### Install
**It is recommended to use [vite cli](https://cn.vitejs.dev/) to build the project**
After the build is complete:
Use `yarn` to install `v-formly-v3`：
```sh
yarn add v-formly-v3
```
or `npm`:
```sh
npm i v-formly-v3 --save
```
### Usage
#### Based on antdv v3 component library
```ts
import { createApp } from "vue";
import App from "./App.vue";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
import * as antIcons from "@ant-design/icons-vue";
import VFormly from "v-formly-v3/antdv";
const app = createApp(App);
app.use(Antd);
Object.keys(antIcons).forEach((key) => {
app.component(key, (antIcons as any)[key]);
});
app.config.globalProperties.$antIcons = antIcons;
app.use(VFormly, {
ui: {
errors: {
required: "required",
},
},
});
app.mount("#app");
```
#### Based on element-plus component library
```ts
import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import * as elIcons from "@element-plus/icons-vue";
import VFormly from "v-formly-v3/element";
const app = createApp(App);
app.use(ElementPlus);
for (const [key, component] of Object.entries(elIcons)) {
app.component(key, component);
}
app.config.globalProperties.$elIcons = elIcons;
app.use(VFormly, {
lib: "element",
ui: {
errors: {
required: "required",
},
},
});
app.mount("#app");
```
MIT Licensed | Copyright © 2022-present v-formly-v3