Mount Components

When using FormCreate, you can integrate form components into your Vue application through global or local mounting. This guide explains how to mount and use FormCreate components in Vue 3 projects, helping new users get started quickly.

How to Install FormCreate

Global Mounting

Global mounting is suitable for scenarios where the entire application needs to use FormCreate form components. Through global mounting, you can directly use the <form-create> component anywhere in the application.

import { createApp } from 'vue';
import formCreate from '@form-create/element-ui';
import App from './App.vue';


const app = createApp(App);
app.use(formCreate);
app.mount('#app');

Using in Setup

In Vue 3, you can use FormCreate in the setup function, which is more in line with Vue 3's Composition API style.

<template>
    <formCreate :rule="rule"></formCreate>
</template>
<script setup>
    import formCreate from '@form-create/element-ui';
    import { ref } from 'vue';
    const rule = ref([
        {
            type: 'input',
            field: 'name',
            title: 'Name'
        }
    ]);
</script>

On-Demand Mounting

Local mounting is suitable for scenarios where FormCreate is only used in specific components. In this case, you can register the FormCreate component as a local component in your Vue component.

<template>
  <formCreate :rule="rule"></formCreate>
</template>
<script>
  import formCreate from '@form-create/element-ui';
  export default {
    components: {
      formCreate
    },
    data() {
      return {
        rule: [
          {
            type: 'input',
            field: 'name',
            title: 'Name'
          }
        ]
      }
    }
  };
</script>