Introduction

QForm Builder est une couche Nuxt 4 qui fournit deux composants publics principaux :

• FormBuilder : l’éditeur visuel de formulaires ;
• FormViewer : le rendu runtime d’un formulaire à partir d’un schéma.

L’objectif est de pouvoir créer un formulaire dans une interface d’administration, sauvegarder son schéma, puis le rejouer ailleurs dans une application Nuxt 4.

Architecture retenue

Le projet reste volontairement organisé comme un Nuxt layer :

qform-builder/
├── app/
│   ├── components/
│   │   ├── FormBuilder.vue
│   │   └── FormViewer.vue
│   ├── composables/
│   ├── stores/
│   └── types/
├── .playground/
│   └── nuxt.config.ts
├── formkit.config.ts
├── nuxt.config.ts
└── package.json

Le dossier .playground sert uniquement à tester le layer pendant son développement. Une application consommatrice, elle, utilise le layer avec extends dans son propre nuxt.config.ts.

Flux standard

Administrateur
    ↓
FormBuilder
    ↓
Schéma FormKit/Quasar JSON
    ↓
Stockage local, API, Feathers/NFZ, MongoDB
    ↓
FormViewer
    ↓
Utilisateur final

Composants publics

FormBuilder

FormBuilder est le composant d’édition. Il gère :

• l’ajout de champs ;
• la sélection d’un champ ;
• la configuration des propriétés ;
• le drag and drop ;
• le mode aperçu ;
• l’autosave ;
• l’isolation multi-instance via builder-id.

FormViewer

FormViewer est le composant de rendu. Il reçoit un schéma et des valeurs, puis émet un événement submit lorsque le formulaire est validé.

À retenir

Pour une intégration stable dans NFZ Studio ou dans une autre application Nuxt 4, donne toujours un builder-id stable à chaque instance du builder :

<FormBuilder builder-id="customer-registration" />

Ce builder-id isole le store Pinia, l’historique, l’autosave et les clés localStorage.