Use FormBuilder

FormBuilder is the public visual editing component.

It encapsulates:

• the editing toolbar;
• the elements drawer;
• the settings drawer;
• the editable form canvas;
• drag-and-drop behavior;
• autosave;
• a public API exposed through ref;
• multi-instance isolation through builder-id.

Minimal example

<script setup lang="ts">
import type { FormBuilderSchema, FormBuilderValues } from '@vevedh/qform-builder-layer/types'

const schema = ref<FormBuilderSchema>([])
const values = ref<FormBuilderValues>({})
</script>

<template>
  <ClientOnly>
    <FormBuilder
      builder-id="minimal-builder"
      v-model:schema="schema"
      v-model:values="values"
    />
  </ClientOnly>
</template>

Example with save handling

<script setup lang="ts">
import type {
  FormBuilderSavePayload,
  FormBuilderSchema,
  FormBuilderValues,
} from '@vevedh/qform-builder-layer/types'

const schema = ref<FormBuilderSchema>([])
const values = ref<FormBuilderValues>({})

async function handleSave(payload: FormBuilderSavePayload) {
  console.log('schema', payload.schema)
  console.log('values', payload.values)
  console.log('settings', payload.settings)
}
</script>

<template>
  <ClientOnly>
    <FormBuilder
      builder-id="contact-builder"
      v-model:schema="schema"
      v-model:values="values"
      autosave
      storage-key="contact-builder"
      @save="handleSave"
    />
  </ClientOnly>
</template>

Use the public API with ref

<script setup lang="ts">
import type { FormBuilderPublicApi } from '@vevedh/qform-builder-layer/types'

const builder = ref<FormBuilderPublicApi | null>(null)

async function exportSchema() {
  const snapshot = builder.value?.exportSchema()
  console.log(snapshot)
}
</script>

<template>
  <ClientOnly>
    <FormBuilder ref="builder" builder-id="api-builder" />
  </ClientOnly>

  <q-btn label="Export" color="primary" @click="exportSchema" />
</template>

Customize labels

<FormBuilder
  builder-id="labels-builder"
  :labels="{
    save: 'Save form',
    reset: 'Reset',
    preview: 'Preview',
  }"
/>

Toolbar slots

The component can expose toolbar customization points for host applications. Use these slots to add business actions such as publish, duplicate, save as template or generate a public link.

Best practice

Do not write persistence logic inside FormBuilder. Listen to @save, then delegate persistence to a store, repository or service.