FcDesigner

Appearance

Ant Design Vue PC Form Designer ​

FcDesigner is a low-code visual form designer for Vue 3. Build forms quickly with drag-and-drop to boost productivity and save time. Used across government systems, OA platforms, ERP systems, e-commerce sites, and workflow management.

Built on Vue 3.0 and Ant Design Vue. Features built-in multi-language support, extensible architecture, and custom component capabilities.

Note

When reading documentation, replace @form-create/element-ui with @form-create/ant-design-vue.

Note

form-create version needs to be >= 3.2.18

Installation ​

Install @form-create/antd-designer:

sh
npm install @form-create/antd-designer@^3
npm install @form-create/ant-design-vue@^3
npm install ant-design-vue

To update an existing renderer installation:

shell
npm update @form-create/ant-design-vue@^3

Import ​

Node.js Import

For Node.js projects, import and configure in your Vue 3 project:

js
import FcDesigner from '@form-create/antd-designer'
import antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
// Create Vue application
const app = createApp(App);
app.use(antd)
app.use(FcDesigner)
app.use(FcDesigner.formCreate)
// Mount application
app.mount('#app');

CDN Import

To use CDN, import dependencies in your HTML file:

html
<link rel="stylesheet" href="https://unpkg.com/ant-design-vue@4/dist/reset.css"></link>
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"></link>
<!-- Import Vue and required components -->
<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
<script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/ant-design-vue@4/dist/antd.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>

<!-- Import form-create and fcDesigner -->
<script src="https://unpkg.com/@form-create/ant-design-vue@^3/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/vant@^3/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/antd-designer@^3/dist/index.umd.js"></script>

<div id="app">
    <fc-designer height="100vh"></fc-designer>
</div>
<!-- Mount component -->
<script>
    // Create Vue application instance
    const app = Vue.createApp({});
    // Mount AntDesignVue
    app.use(antd);
    // Mount fcDesignerPro component
    app.use(FcDesigner);
    // Mount formCreate
    app.use(FcDesigner.formCreate);
    // Mount Vue application
    app.mount('#app');
</script>

Usage ​

Use the fc-designer component in Vue 3 components:

vue
<template>
    <fc-designer ref="designer" height="100vh" />
</template>
<script setup>
    import { ref } from 'vue';
    // You can get the designer instance or perform other operations here
    const designer = ref(null);
</script>