Vueform Builder landmarks
This page is a functional reading grid for tracking useful parity with Vueform Builder. It does not try to copy its interface: it verifies that QForm Builder covers the same work families inside a Nuxt 4 application, with Quasar 2, FormKit, Pinia and self-hosted data.
Positioning
| Topic | QForm Builder Community |
|---|---|
| Integration | Nuxt 4 layer, consumed with extends. |
| UI | Quasar 2, responsive drawers, canvas, catalog, tree and integrated panels. |
| Runtime | FormViewer replays schemas produced by the builder. |
| Data | Versioned JSON documents, migrations, import/export and isolated autosave. |
| Extensibility | Public catalog, custom panels, validation rules, locales, themes and templates. |
| Hosting | Self-hosted, with no required external service or mandatory telemetry. |
Validated feature coverage
The former intermediate badges from the public page are now treated as validated Community features. Topics that do not belong to the Community core are moved outside this grid so product debt is not mixed with Studio tracks.
| Family | Status | What is available |
|---|---|---|
| Nuxt installation | ✅ | Layer ready for new or existing apps, with an extends example. |
| Visual builder | ✅ | Catalog, canvas, selection, drag-and-drop, overlays, preview and edit mode. |
| Public catalog | ✅ | catalog prop, append or replace mode, defineQFormElement() helper and typed merge. |
| Interactive fields | ✅ | Text, number, email, phone, textarea, checkbox, select, dates, files, range, rating, editor and advanced Quasar controls. |
| Static elements | ✅ | Headings, paragraphs, separators, buttons, controlled HTML content and privacy consent. |
| Nested structures | ✅ | Sections, fieldsets, columns, tabs and steps with unified interaction routing. |
| Save / load | ✅ | @save, local autosave, JSON import/export, full versioned document and migrations. |
| Runtime rendering | ✅ | FormViewer supports controlled values, readonly mode, validation, theme and locales. |
| Conditions | ✅ | Nested groups, typed operators, AND/OR logic and runtime checks. |
| Validation | ✅ | FormKit rules, custom messages, public registry and runtime coverage. |
| Steps / pages | ✅ | Stepper, controlled navigation, duplication, safe deletion and per-step validation. |
| Tree | ✅ | Recursive view, selection, actions, drag-and-drop and keyboard reordering. |
| Devices / responsive preview | ✅ | Viewport switcher, default, sm, lg presets, diagnostics and auto-fit drawers. |
| Visible history | ✅ | Undo/redo, history panel, entry restore, configurable depth and shortcuts. |
| Theme | ✅ | Theme Builder, presets, palettes, dark/light, icons and accessible preview. |
| Field styles | ✅ | Surfaces, Quasar variants, density, spacing, radius, shadow, width and allowed UnoCSS utilities. |
| I18n / locales | ✅ | French and English included, typed host override through locale and locales. |
| Custom panels | ✅ | configPanels prop, matcher by type or predicate, priority and internal fallback. |
| Business rules | ✅ | validationRules prop, typed public rules and localizable messages. |
| Templates / presets | ✅ | Template registry, Community templates, protected replacement and API application. |
| Official export / import | ✅ | Dedicated dialogs, full document export, schema-only compatibility and migrated import. |
| Host application integration | ✅ | Public ref API, typed events, host-app fixture and verified npm contract. |
| Accessibility | ✅ | Keyboard navigation, announcements, focus restore, audited modals and axe WCAG 2.2 AA. |
Former yellow badges closed
| Former gap | Current result |
|---|---|
| Catalog to expose publicly | ✅ catalog, catalogMode, defineQFormElement() and public types. |
| Validation to complete | ✅ native rules, messages, public registry and runtime tests. |
| Conditions to extend | ✅ groups, typed operators and logic simulator. |
| Steps/pages to strengthen | ✅ structured stepper, blocking navigation, duplication and controlled deletion. |
| Real device presets | ✅ exposed viewports, stable switcher and responsive drawers. |
| Visible history | ✅ history panel, undo/redo, restore and shortcuts. |
| Locale system | ✅ FR/EN registry, host override and i18n checks. |
| Theme / design tokens | ✅ Theme Builder, dark/light, palettes, icons and runtime theme. |
| Configurable catalog | ✅ injection, replacement or merge with the Community catalog. |
| Custom elements | ✅ typed element definition and rendering through the public catalog. |
| Custom config panels | ✅ public registry with matcher and priority. |
| Builder presets | ✅ Community templates and applyTemplate() API. |
| Style panel | ✅ FieldStylesPanel, serialized styles and runtime cleanup. |
| Export/import panel | ✅ official dialogs, versioned JSON and historical schema compatibility. |
| Database save from the host app | ✅ @save contract and documented NFZ integration examples without imposing a backend. |
Outside the Community scope
Two tracks remain intentionally separate from the Community core: exporting a standalone native Vue component and generating a form from a business description. They bring more value inside NFZ Studio or a dedicated pack, because they involve server architecture, security and maintenance choices that should not make the public layer heavier.
Minimal parity criterion
QForm Builder covers the expected core when a Nuxt 4 application can:
- integrate the builder as a public component;
- build a complete form without editing internal files;
- manage fields, structures, pages, conditions, validation, styles, responsive preview and history;
- customize the catalog and configuration panels;
- save a versioned JSON document;
- replay that document with
FormViewer; - connect the full cycle to NFZ Studio or another host application without coupling to playground pages.
This page is checked by bun run vueform:parity:check to prevent unjustified intermediate statuses from coming back in the public documentation.