Introduction
QForm Builder is a Nuxt 4 layer for creating and rendering dynamic forms with Vue 3, Quasar 2 and FormKit.
It exposes two public components:
FormBuilder, for composing forms in an admin interface;FormViewer, for rendering a saved form schema.
The workflow is straightforward: the builder produces a JSON document, your app stores it, and the viewer renders it elsewhere.
txt
FormBuilder → JSON schema → storage → FormViewerWhen to use it
Use QForm Builder when forms need to change without redeploying the application: contact forms, registrations, surveys, business records, internal forms or multi-step journeys.
The layer is also useful when you want to keep control over Nuxt code, Quasar rendering, FormKit validation and schema storage.
What the layer includes
| Item | Role |
|---|---|
FormBuilder | Visual editing, catalog, canvas, properties, preview, import/export. |
FormViewer | Runtime schema rendering, values, validation and submit events. |
| Catalog | Interactive fields, static content and nested structures. |
| Theme | Visual tokens, component styles and safe presets. |
| Public contract | Props, events, methods and exported types for host applications. |
Quick example
vue
<script setup lang="ts">
import type { FormKitSchemaDefinition } from '@formkit/core'
const schema = ref<FormKitSchemaDefinition[]>([])
const values = ref<Record<string, unknown>>({})
</script>
<template>
<ClientOnly>
<FormBuilder
builder-id="contact-builder"
v-model:schema="schema"
v-model:values="values"
title="Contact form"
/>
</ClientOnly>
</template>Keep builder-id stable. It isolates history, autosave, localStorage keys and the Pinia state of each instance.
Suggested path
- Install the layer in a Nuxt 4 application.
- Create an admin page with
FormBuilder. - Save the schema in your application storage.
- Render the schema with
FormViewer. - Add domain elements, panels and templates when needed.