Use QForm Builder in a new Nuxt 4 application

This page shows how to create a fresh Nuxt 4 application and consume QForm Builder as a published npm layer or as a local layer during development.

1. Create the Nuxt 4 application

bunx nuxi init my-qform-app
cd my-qform-app
bun install

2. Add the layer

npm mode

bun add @vevedh/qform-builder-layer

local development mode

If the layer is next to your application:

export default defineNuxtConfig({
  extends: ['../qform-builder-layer'],
})

3. Install required peer dependencies

bun add nuxt-quasar-ui @pinia/nuxt @formkit/nuxt   quasar @quasar/extras   @formkit/core @formkit/i18n @formkit/vue @formkit/utils

4. Configure nuxt.config.ts

export default defineNuxtConfig({
  extends: ['@vevedh/qform-builder-layer'],

  modules: [
    'nuxt-quasar-ui',
    '@pinia/nuxt',
    '@formkit/nuxt',
  ],

  compatibilityDate: '2026-05-08',
})

5. Create a builder page

<script setup lang="ts">
import type { FormBuilderSchema, FormBuilderValues } from '@vevedh/qform-builder-layer/types'

const schema = ref<FormBuilderSchema>([])
const values = ref<FormBuilderValues>({})
</script>

<template>
  <ClientOnly>
    <FormBuilder
      builder-id="contact-form-builder"
      v-model:schema="schema"
      v-model:values="values"
      autosave
      storage-key="contact-form-builder"
    />
  </ClientOnly>
</template>

6. Start the application

bun run dev

Best practice

Use a stable business-oriented builder-id. Avoid random ids because autosave, store isolation and future persistence depend on that key.