Installation

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

Note

If you encounter 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/element-ui@^3
npm i element-plus

Import and Mount

// Import form-create component library
import formCreate from '@form-create/element-ui';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
// Create Vue application
const app = Vue.createApp({});
app.use(formCreate);
app.use(ElementPlus);
app.mount('#app');

Advanced FormCreate Form Designer is Here, Making Form Design Easier

CDN Import

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

<!-- Import Vue -->
<script src="https://unpkg.com/vue"></script>
<!-- Import Element Plus -->
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<link href="https://unpkg.com/element-plus/dist/index.css" rel="stylesheet">
<!-- Import form-create -->
<script src="https://unpkg.com/@form-create/element-ui@^3/dist/form-create.min.js"></script>
<!-- Initialize Vue application and mount components -->
<script>
    const app = Vue.createApp({});
    app.use(ELEMENT); // Use Element Plus component library
    app.use(formCreate); // Use form-create component
    app.mount('#app');
</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

• Element Plus

Example