Installation

Install and use the @form-create/vant component library in browser or npm environments.

Note

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

Install via npm

We recommend installing via npm for better compatibility with Webpack and other build tools.

npm install @form-create/vant@^3
npm install vant

Import and Mount

// Import form-create-vant component library
import formCreateMobile from '@form-create/vant';
import vant from 'vant';
import 'vant/lib/index.css';
// Use in Vue application
const app = Vue.createApp({});
app.use(formCreateMobile);
app.use(vant)
app.mount('#app');

Browser Environment

For browser environments, load the library directly via CDN links.

<!-- Import Vant style file -->
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"/>
<!-- Import Vue and Vant JS files -->
<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
<!-- Import formCreate -->
<script src="https://cdn.jsdelivr.net/npm/@form-create/vant/dist/form-create.min.js"></script>
<!-- Initialize Vue app and mount components -->
<script>
    const app = Vue.createApp({});
    app.use(vant); // Use Vant component library
    app.use(formCreateMobile); // Use form-create-vant component
    app.mount('#app');
</script>

Component Mounting Methods

Create Form

<template>
    <!-- Use form-create-mobile component -->
    <form-create-mobile :rule="rule" v-model:api="api" v-model="formData" :option="options"/>
</template>
<script setup>
    import { ref } from 'vue';
    import formCreateMobile from '@form-create/vant';
    const api = ref({});
    const formData = 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

• vant ^4.0

Example