Installation

Learn how to install and use the @form-create/naive-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.

NPM

Install

npm installation works best with webpack and other build tools.

npm i @form-create/naive-ui@^3
npm i naive-ui

Import and Mount

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

Component Mounting Methods

Create Form

<template>
    <form-create :rule="rule" v-model:api="fApi" :option="options" />
</template>
<script setup>
    import { ref } from 'vue';
    const fApi = 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

• naive-ui

Example