Integrate QForm Builder in an existing Nuxt 4 application

This page targets existing Nuxt 4 projects: dashboards, admin portals, NFZ Studio, back-office applications or extranets.

1. Add the layer

Local mode

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

npm package mode

bun add @vevedh/qform-builder-layer

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

2. Check existing modules

The host application must provide the expected Nuxt modules and peer dependencies:

export default defineNuxtConfig({
  modules: [
    'nuxt-quasar-ui',
    '@pinia/nuxt',
    '@formkit/nuxt',
  ],
})

3. SSR attention point

The layer does not force ssr: false. The host application keeps control of its SSR strategy.

For FormBuilder, prefer:

<ClientOnly>
  <FormBuilder builder-id="admin-builder" />
</ClientOnly>

FormViewer can usually be integrated more broadly, but the Quasar/FormKit environment still needs to be correctly configured.

4. Recommended integration page

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

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

async function saveForm(payload: FormBuilderSavePayload) {
  // Replace this with your API, Pinia store or Feathers/NFZ service.
  console.log('Save form', payload)
}
</script>

<template>
  <ClientOnly>
    <FormBuilder
      builder-id="existing-app-form"
      v-model:schema="schema"
      v-model:values="values"
      autosave
      @save="saveForm"
    />
  </ClientOnly>
</template>

5. Recommended pattern for an existing app

Keep the UI layer separate from persistence:

Page
  ↓
Pinia business store
  ↓
Repository / Feathers service / REST API
  ↓
Database

This keeps FormBuilder reusable and avoids coupling it to a specific backend.