Quick Start

@form-create/designer supports Vue 3. This guide shows how to install and use it in Vue 3 projects.

Note

form-create version needs to be >= 3.2.18

Installation

Install the Vue 3 version of @form-create/designer:

npm install @form-create/designer@^3
npm install @form-create/element-ui@^3
npm install element-plus

To update an existing renderer installation:

npm update @form-create/element-ui@^3

Import

Node.js Import

For Node.js projects, import and configure in your Vue 3 project:

import { createApp } from 'vue';
import FcDesigner from '@form-create/designer';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
// Create Vue application
const app = createApp(App);
// Use Element Plus and FcDesigner
app.use(ElementPlus);
app.use(FcDesigner);
app.use(FcDesigner.formCreate);
// Mount application
app.mount('#app');

CDN Import

To use CDN, import dependencies in your HTML file:

<!-- Import Element Plus styles -->
<link href="https://unpkg.com/element-plus/dist/index.css" rel="stylesheet" />
<!-- Import Vue 3 -->
<script src="https://unpkg.com/vue"></script>
<!-- Import Element Plus -->
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
<!-- Import form-create and designer -->
<script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>
<script src="https://unpkg.com/@form-create/designer@next/dist/index.umd.js"></script>
<div id="app">
    <fc-designer height="100vh"></fc-designer>
</div>
<script>
    const { createApp } = Vue;
    const app = createApp({});
    app.use(ElementPlus);
    app.use(FcDesigner);
    app.use(FcDesigner.formCreate);
    app.mount('#app');
</script>

Usage

Use the fc-designer component in Vue 3 components:

<template>
    <fc-designer ref="designer" height="100vh" />
</template>
<script setup>
    import { ref } from 'vue';
    // You can get the designer instance or perform other operations here
    const designer = ref(null);
</script>