Installation

This guide explains how to install and use the @form-create/vant component library, including methods for browser environments and npm installation.

Note

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

Install via npm

Installing via npm provides better integration with modern build tools like Webpack.

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

In the browser, you can install by directly importing the relevant 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)); // Show form data on submit
        },
        resetBtn: true // Show reset button
    });
    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