v formly v3

v-formly-v3

v-formly-v3 is a dynamic (JSON driven) form library for vue 3.

Simplicity first

Generate complex dynamic forms and verification through standard JSON Schema & Ajv Validator, which is fast, concise and efficient.

Reusability

Generate form templates in the form of JSON, and a form can be reused in multiple places by simply modifying it! It enables you to quickly develop form pages. Compared with writing traditional html form forms, using JSON form to define forms can greatly improve development efficiency.

Vue driver

Currently Vue 3.x is supported, and the component library supports antdv v3 & element-plus. Support for other UI libraries (DevUI, etc.) for Vue 3.x is under development. . .

quick start

Documentation & Demo

Introduction

document

Stackblitzantdv, CodeSandboxantdv

Stackblitz element, CodeSandbox element

Install

It is recommended to use vite cli to build the project

After the build is completed:

Install v-formly-v3 using yarn :

yarn add v-formly-v3

Or install it using npm :

npm i v-formly-v3 --save

use

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 : "必填项" ,
    } ,
  } ,
} ) ;
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 : "必填项" ,
    } ,
  } ,
} ) ;
app . mount ( "#app" ) ; 

other

Whether you are learning or using v-formly-v3, if you have any questions, you can join the QQ group: 610930944. We will answer any inconveniences in the process of using v-formly-v3 for you!

MIT Licensed | Copyright © 2022-present v-formly-v3