Installation

Learn how to install and use the @form-create/ant-design-vue component library for both browser and npm environments.

Note

If you encounter any issues, please update the UI framework and FormCreate to the latest version.

Install via npm

npm installation works best with modern build tools like Webpack.

npm i @form-create/ant-design-vue@^3
npm i ant-design-vue

Import and Mount

// Import form-create component library
import formCreate from '@form-create/ant-design-vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
// Create Vue application
const app = Vue.createApp({});
app.use(formCreate);
app.use(Antd)
app.mount('#app');

FormCreate Pro Form Designer is Now Available, Making Form Design Easier

CDN Import

Get the latest version from unpkg.com/@form-create/ant-design-vue and include the JavaScript file on your page.

<!-- Import Ant Design Vue styles -->
<link href="https://unpkg.com/ant-design-vue@3/dist/antd.min.css" rel="stylesheet">
<!-- Import Vue -->
<script src="https://unpkg.com/vue"></script>
<!-- Import Day.js (if needed) -->
<script src="https://unpkg.com/dayjs"></script>
<!-- Import Ant Design Vue JS -->
<script src="https://unpkg.com/ant-design-vue@3/dist/antd.min.js"></script>
<!-- Import form-create -->
<script src="https://unpkg.com/@form-create/ant-design-vue@^3/dist/form-create.min.js"></script>

Component Mounting Methods

Create Form

<template>
    <form-create :rule="rule" v-model:api="api" :option="options" />
</template>
<script setup>
    import { ref } from 'vue';
    const api = ref({});
    const options = ref({
        onSubmit: (formData) => {
            alert(JSON.stringify(formData));
        },
        resetBtn: true,
    });
    const rule = ref([
        {
            type: 'input',
            field: 'goods_name',
            title: 'Product Name',
            value: 'form-create',
        },
        {
            type: 'checkbox',
            field: 'label',
            title: 'Label',
            value: [0, 1, 2, 3],
            options: [
                { label: 'Easy to Use', value: 0 },
                { label: 'Fast', value: 1 },
                { label: 'Efficient', value: 2 },
                { label: 'All-in-One', value: 3 },
            ],
        },
    ]);
</script>

Compatibility

• Ant Design Vue

Diagram