Installation Nuxt 4

Cette page part d’une application Nuxt 4 neuve. Pour une application existante, consultez Projet Nuxt existant.

Prérequis

• Bun 1.3 ou plus récent ;
• Nuxt 4 ;
• Vue 3 ;
• un projet en TypeScript strict.

Créer l’application

bunx nuxi init qform-demo
cd qform-demo
bun install

Installer le layer

bun add @vevedh/qform-builder-layer \
  nuxt-quasar-ui @pinia/nuxt @formkit/nuxt \
  quasar @quasar/extras \
  @formkit/core @formkit/i18n @formkit/inputs @formkit/vue @formkit/utils

Le package garde Nuxt, Quasar, Pinia et FormKit en dépendances hôte. Vous maîtrisez ainsi les versions dans votre application.

Activer le layer

// nuxt.config.ts
export default defineNuxtConfig({
  extends: ['@vevedh/qform-builder-layer'],
  compatibilityDate: '2026-05-08',
})

Pendant le développement du layer, vous pouvez aussi l’utiliser localement :

// nuxt.config.ts
export default defineNuxtConfig({
  extends: ['./layers/qform-builder'],
  compatibilityDate: '2026-05-08',
})

Créer une page builder

<!-- app/pages/forms/builder.vue -->
<script setup lang="ts">
import type { FormKitSchemaDefinition } from '@formkit/core'

type FormBuilderSavePayload = {
  builderId: string
  schema: FormKitSchemaDefinition[]
  values: Record<string, unknown>
  settings: Record<string, unknown>
}

const schema = ref<FormKitSchemaDefinition[]>([])
const values = ref<Record<string, unknown>>({})

function saveForm(payload: FormBuilderSavePayload) {
  localStorage.setItem(
    `demo:form:${payload.builderId}`,
    JSON.stringify({
      schema: payload.schema,
      values: payload.values,
      settings: payload.settings,
      savedAt: new Date().toISOString(),
    }),
  )
}
</script>

<template>
  <ClientOnly>
    <FormBuilder
      builder-id="demo-contact"
      v-model:schema="schema"
      v-model:values="values"
      title="Formulaire de contact"
      subtitle="Composez le formulaire, puis sauvegardez son schéma."
      autosave
      height="calc(100vh - 32px)"
      @save="saveForm"
    />
  </ClientOnly>
</template>

Lancer le projet

bun run dev

Ouvrez ensuite :

http://localhost:3000/forms/builder

Prochaine étape

Passez à Configuration pour fixer les conventions de langue, de stockage, de hauteur et de thèmes avant de créer plusieurs formulaires.