Mount Components

When using FormCreate, 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 when the entire application needs FormCreate form components. With global mounting, you can 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, use FormCreate in the setup function, which aligns 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 when FormCreate is only used in specific components. 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>