Configuration

QForm Builder does not require a dedicated configuration file. Most settings live on the public components, which keeps the Nuxt integration easy to read.

Minimal convention

<FormBuilder
  builder-id="contact"
  locale="en"
  height="calc(100vh - 32px)"
  autosave
/>

Prop	Recommended use
builder-id	Stable identifier for the form or editing screen.
locale	fr by default, en included.
height	Builder shell height in the page.
autosave	Local safety save while editing.
storage-key	Explicit key when several builders share the same page.

Language

<FormBuilder builder-id="support" locale="en" />
<FormViewer :schema="schema" :values="values" locale="fr" />

You can override part of the labels without copying the full dictionary:

import type { QFormBuilderLocaleRegistry } from '@vevedh/qform-builder-layer/types'

const locales: QFormBuilderLocaleRegistry = {
  en: {
    toolbar: {
      save: 'Publish',
    },
  },
}

<FormBuilder builder-id="support" locale="en" :locales="locales" />

Persistence

The builder does not impose a backend. Listen to @save, validate the payload in your application, then store the document in your service.

type SavedForm = {
  id: string
  schema: unknown[]
  values: Record<string, unknown>
  settings: Record<string, unknown>
  updatedAt: string
}

async function saveForm(payload: SavedForm) {
  await $fetch('/api/forms/' + encodeURIComponent(payload.id), {
    method: 'PUT',
    body: payload,
  })
}

Keep server-side validation mandatory: a schema received from an admin UI is still user input.

Drawer width

The default behavior is auto-fit. The builder uses its own available width, not only window.innerWidth.

<FormBuilder
  builder-id="embedded-builder"
  drawer-behavior="default"
  height="720px"
/>

Available values:

Value	Effect
default	Auto-fit according to available space.
desktop	Persistent drawers.
mobile	Overlay drawers.

Style safety

The Styles panel uses a closed list of presets, Quasar tones and prefixed UnoCSS utilities. Do not pass free-form classes from an end user into the schema.

<FormViewer
  :schema="schema"
  :values="values"
  locale="en"
/>

The runtime removes builder metadata before FormKit rendering.

Project checklist

• keep builder-id stable;
• choose an explicit storage key for complex screens;
• validate schemas server-side before persistence;
• keep binary files outside the form JSON;
• render the form with FormViewer in a separate page before publishing it.