README.en-us.md

v-formly-v3

Languages: English (this file), 中文.

v-formly-v3 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

Document

Stackblitz antdv， CodeSandbox antdv

Stackblitz element， CodeSandbox element

Install

It is recommended to use vite cli to build the project

After the build is complete:

Use yarn to install v-formly-v3：

yarn add v-formly-v3

or npm:

npm i v-formly-v3 --save

Usage

Based on antdv v3 component library

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

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