Nuxt 4 installation

This page starts from a fresh Nuxt 4 application. For an existing application, see Existing Nuxt project.

Prerequisites

• Bun 1.3 or newer;
• Nuxt 4;
• Vue 3;
• a strict TypeScript project.

Create the application

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

Install the 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

Nuxt, Quasar, Pinia and FormKit stay as host dependencies. This keeps version control inside your application.

Enable the layer

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

During layer development, you can also use a local path:

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

Create a builder page

<!-- 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="Contact form"
      subtitle="Compose the form, then save its schema."
      autosave
      height="calc(100vh - 32px)"
      @save="saveForm"
    />
  </ClientOnly>
</template>

Run the project

bun run dev

Then open:

http://localhost:3000/forms/builder

Next step

Continue with Configuration to define language, storage, height and theme conventions before creating several forms.