Introduction
QForm Builder est un layer Nuxt 4 pour créer et rendre des formulaires dynamiques avec Vue 3, Quasar 2 et FormKit.
Il fournit deux composants publics :
FormBuilder, pour composer un formulaire dans une interface d’administration ;FormViewer, pour afficher ce formulaire à partir du schéma sauvegardé.
L’idée est simple : le builder produit un document JSON, votre application le stocke, puis le viewer le rejoue ailleurs.
txt
FormBuilder → schéma JSON → stockage → FormViewerQuand l’utiliser
Utilisez QForm Builder lorsque vos formulaires doivent évoluer sans redéployer l’application : demande de contact, inscription, enquête, fiche métier, formulaire interne ou parcours multi-étapes.
Le layer est aussi utile si vous voulez garder le contrôle du code Nuxt, du rendu Quasar, de la validation FormKit et du stockage des schémas.
Ce que contient le layer
| Élément | Rôle |
|---|---|
FormBuilder | Édition visuelle, catalogue, canvas, propriétés, aperçu, import/export. |
FormViewer | Rendu runtime du schéma, valeurs, validation et soumission. |
| Catalogue | Champs interactifs, contenus statiques et structures imbriquées. |
| Thème | Tokens visuels, styles par composant et presets sûrs. |
| Contrat public | Props, événements, méthodes et types exportés pour l’application hôte. |
Exemple rapide
vue
<script setup lang="ts">
import type { FormKitSchemaDefinition } from '@formkit/core'
const schema = ref<FormKitSchemaDefinition[]>([])
const values = ref<Record<string, unknown>>({})
</script>
<template>
<ClientOnly>
<FormBuilder
builder-id="contact-builder"
v-model:schema="schema"
v-model:values="values"
title="Formulaire de contact"
/>
</ClientOnly>
</template>builder-id doit rester stable. Il isole l’historique, l’autosave, les clés localStorage et l’état Pinia de chaque instance.
Parcours conseillé
- Installez le layer dans une application Nuxt 4.
- Créez une page d’administration avec
FormBuilder. - Sauvegardez le schéma dans votre stockage applicatif.
- Affichez ce schéma avec
FormViewer. - Ajoutez vos éléments, panneaux et modèles métier au besoin.