Introduction

QForm Builder is a reusable Nuxt 4 layer that exposes two main public components:

• FormBuilder: the visual form editor;
• FormViewer: the runtime component used to render a generated form.

The project is designed for Nuxt 4, Vue 3, Quasar 2, Pinia and FormKit. It is also prepared for future integration in NFZ Studio and other Nuxt 4 back-office applications.

Selected architecture

The current Community edition is published as a Nuxt Layer.

qform-builder-layer/
├── app/
│   ├── components/
│   ├── composables/
│   ├── constants/
│   ├── stores/
│   ├── types/
│   └── utils/
├── .playground/
├── docs/
├── formkit.config.ts
├── nuxt.config.ts
└── package.json

The .playground directory is only used for local development and examples. It extends the root layer and allows the package to be tested as if it were consumed by another Nuxt application.

Standard flow

FormBuilder
  ↓ emits schema + values
Persistence layer
  ↓ reloads schema
FormViewer
  ↓ renders the runtime form
Submit handler

Public components

FormBuilder

FormBuilder is the visual editor. It lets the user create, configure and organize fields. It supports controlled state with v-model:schema and v-model:values.

FormViewer

FormViewer renders a schema generated by FormBuilder. It is intended for public forms, previews and admin workflows.

Key points

• Use builder-id for every persistent builder instance.
• Wrap FormBuilder in <ClientOnly> when the host app uses SSR.
• Keep persistence outside the UI component: Pinia store, Feathers/NFZ service or another API layer.