@quickflo/quickforms-vue

Vue 3 bindings for QuickForms.

Installation

pnpm

pnpm add @quickflo/quickforms @quickflo/quickforms-vue

npm

npm install @quickflo/quickforms @quickflo/quickforms-vue

yarn

yarn add @quickflo/quickforms @quickflo/quickforms-vue

Components

DynamicForm

Main form component that generates fields from JSON Schema.

<template>
  <DynamicForm
    :schema="schema"
    v-model="formData"
    :options="options"
    @validation="handleValidation"
  />
</template>

Props:

• schema - JSON Schema definition
• modelValue - Form data (v-model)
• options - Form configuration

Events:

• @update:modelValue - Form data changed
• @validation - Validation state changed

See Form Options API for complete options reference.

Field Components

Pre-built components for all field types:

• StringField - Text inputs
• NumberField - Number inputs
• BooleanField - Checkboxes
• EnumField - Select dropdowns
• DateField - Date/time pickers
• ObjectField - Nested objects
• ArrayField - Dynamic arrays
• OneOfField - Conditional schemas

Composables

useFormField

Hook for field state management.

const { value, errorMessage, label, hint } = useFormField(path, schema)

useFormContext

Access form-level context.

const context = useFormContext()
// { readonly, disabled, schema, rootPath, context }

Next Steps

• Getting Started - Build your first form
• API Reference - Complete component documentation
• Examples - See QuickForms in action