Exemple complet : builder autonome

Cette page donne un exemple prêt à coller dans une application Nuxt 4 qui consomme le layer.

Fichier

app/pages/forms/builder.vue

Code complet

<script setup lang="ts">
import type { FormKitSchemaDefinition } from '@formkit/core'

type FormBuilderSchema = FormKitSchemaDefinition[]
type FormBuilderValues = Record<string, unknown>

type FormBuilderSavePayload = {
  builderId: string
  schema: FormBuilderSchema
  values: FormBuilderValues
  settings: Record<string, unknown>
}

const schema = ref<FormBuilderSchema>([
  {
    $formkit: 'q-input',
    name: 'firstname',
    label: 'Prénom',
    inputType: 'text',
    validation: 'required',
  },
  {
    $formkit: 'q-input',
    name: 'email',
    label: 'Adresse e-mail',
    inputType: 'email',
    validation: 'required|email',
  },
])

const values = ref<FormBuilderValues>({})
const lastSavedAt = ref<string | null>(null)

function saveToLocalStorage(payload: FormBuilderSavePayload) {
  if (!import.meta.client) return

  localStorage.setItem(
    'qform-demo:standalone-builder',
    JSON.stringify({
      schema: payload.schema,
      values: payload.values,
      settings: payload.settings,
    }),
  )

  lastSavedAt.value = new Date().toLocaleString('fr-FR')
}

function restoreFromLocalStorage() {
  if (!import.meta.client) return

  const raw = localStorage.getItem('qform-demo:standalone-builder')
  if (!raw) return

  const restored = JSON.parse(raw) as {
    schema?: FormBuilderSchema
    values?: FormBuilderValues
  }

  schema.value = restored.schema || []
  values.value = restored.values || {}
}

onMounted(() => {
  restoreFromLocalStorage()
})
</script>

<template>
  <QPage padding class="column q-gutter-md">
    <QBanner v-if="lastSavedAt" rounded class="bg-positive text-white">
      Dernière sauvegarde : {{ lastSavedAt }}
    </QBanner>

    <FormBuilder
      builder-id="standalone-builder-demo"
      v-model:schema="schema"
      v-model:values="values"
      title="Builder autonome"
      subtitle="Exemple complet avec localStorage"
      autosave
      height="calc(100vh - 96px)"
      @save="saveToLocalStorage"
    />
  </QPage>
</template>

Résultat attendu

La page permet :

• de modifier le schéma ;
• de saisir des valeurs ;
• de sauvegarder localement ;
• de recharger le formulaire après un refresh ;
• de tester l’autosave interne du builder.