Community Edition

QForm Builder Community est la base gratuite et publiable du projet. Elle doit rester simple à installer, claire à documenter et suffisamment stable pour servir de socle à NFZ Studio ou à une application Nuxt 4 existante.

Objectif

L’édition Community fournit le nécessaire pour créer, sauvegarder et rendre des formulaires dynamiques côté Nuxt 4 :

Nuxt 4 Layer
├── FormBuilder
├── FormViewer
├── multi-instance
├── import/export JSON
├── autosave local
├── conditions basiques
├── steps/pages basiques
└── documentation VitePress

Fonctionnalités incluses

Fonctionnalité	Statut Community	Remarque
Nuxt Layer npm	Inclus	Consommation via extends
FormBuilder	Inclus	Composant autonome
FormViewer	Inclus	Rendu runtime
Multi-instance	Inclus	Isolation par builder-id
Autosave local	Inclus	localStorage, clé configurable
Import/export JSON	Inclus	Via props/events/API publique
Catalogue de champs	Inclus	Basé sur les composants existants
Arborescence	Incluse	Panneau gauche
Conditions	Partiel	Base disponible, avancé prévu Pro
Steps/pages	Partiel	Base disponible, UX avancée prévue Pro
Validation avancée	Cible Pro	Zod, async, cross-field
Theme Builder	Cible Pro	Tokens, presets, export thème
Génération NFZ	Cible Studio/Pro	Service NFZ → formulaire CRUD
IA / prompt → formulaire	Cible Pro	À isoler côté serveur

API publique recommandée

Dans une application hôte, privilégier :

<FormBuilder
  builder-id="customer-form"
  v-model:schema="schema"
  v-model:values="values"
  autosave
  @save="saveForm"
/>

Puis :

<FormViewer
  :form-fields="schema"
  v-model="values"
  @submit="submitValues"
/>

Types publics

import type {
  FormBuilderSchema,
  FormBuilderValues,
  FormBuilderSavePayload,
  FormBuilderPublicApi,
} from '@vevedh/qform-builder-layer/types'

Ce qui reste interne

Les stores, les panneaux de configuration et les composants internes peuvent évoluer :

app/stores/**
app/components/settings/**
app/components/builder/**
app/composables/form-builder/**

Pour une intégration stable, éviter de dépendre directement de ces fichiers depuis une application consommatrice.

Bonnes pratiques

Utilise toujours un builder-id stable :

<FormBuilder :builder-id="`service-${serviceName}-builder`" />

Dans une application SSR, enveloppe le builder dans ClientOnly :

<ClientOnly>
  <FormBuilder builder-id="admin-builder" />
</ClientOnly>

Le viewer peut être utilisé plus largement, mais il dépend également de FormKit/Quasar. Il reste donc préférable de le tester dans le contexte réel de l’application hôte.