Configuration

QForm Builder fonctionne sans fichier de configuration dédié. La plupart des réglages se font sur les composants publics, ce qui garde l’intégration lisible dans une application Nuxt.

Convention minimale

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

Prop	Usage conseillé
builder-id	Identifiant stable du formulaire ou de l’écran d’édition.
locale	fr par défaut, en inclus.
height	Hauteur du shell builder dans la page.
autosave	Sauvegarde locale de sécurité pendant l’édition.
storage-key	Clé explicite si plusieurs builders partagent la même page.

Langue

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

Vous pouvez surcharger une partie des libellés sans copier tout le dictionnaire :

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

const locales: QFormBuilderLocaleRegistry = {
  fr: {
    toolbar: {
      save: 'Publier',
    },
  },
}

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

Persistance

Le builder n’impose pas de backend. Écoutez @save, validez le payload côté application, puis stockez le document dans votre 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,
  })
}

Gardez la validation serveur obligatoire : un schéma reçu depuis une interface d’administration reste une donnée utilisateur.

Largeur des panneaux

Le comportement par défaut est auto-fit. Le builder se base sur sa propre largeur utile, pas seulement sur window.innerWidth.

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

Valeurs disponibles :

Valeur	Effet
default	Auto-fit selon l’espace disponible.
desktop	Panneaux persistants.
mobile	Panneaux en overlay.

Sécurité des styles

Le panneau Styles utilise une liste fermée de presets, tons Quasar et utilitaires UnoCSS préfixés. Ne passez pas de classes libres provenant d’un utilisateur final dans le schéma.

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

Le runtime nettoie les métadonnées de builder avant le rendu FormKit.

Checklist projet

• donnez un builder-id stable ;
• choisissez une clé de stockage explicite pour les écrans complexes ;
• validez les schémas côté serveur avant persistance ;
• gardez les fichiers binaires hors du JSON de formulaire ;
• rejouez le formulaire avec FormViewer dans une page séparée avant publication.