V-formly-v3 NPM

v-formly-v3

Languages: English (this file), 中文.

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

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");