Installation

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

Note

If you encounter 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 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 start using it by importing 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