DEV Community: Adrian Miu

JSON Schema to Live Forms: Dynamic Forms Made Easy

Adrian Miu — Thu, 19 Jun 2025 08:16:00 +0000

Imagine building forms that adapt in real-time to user input, server data, or business logic changes—without writing a single line of component code. Picture an admin panel where non-technical users can define form structures, or a multi-tenant application where each client gets custom forms tailored to their workflow.

This isn't science fiction. It's the power of dynamic forms, and with Enforma's schema-driven architecture, it's simpler than you might think.

If you've ever found yourself copy-pasting form components, writing endless conditional rendering logic, or struggling to maintain forms that need to change frequently, dynamic forms are the solution you've been looking for.

Introduction: The Power of Dynamic Forms

What Are Dynamic Forms?

Dynamic forms are forms whose structure, fields, validation rules, and behavior are determined at runtime rather than being hardcoded in your components. Instead of defining form layouts in Vue templates, you describe them using JSON configurations that can be stored in databases, loaded from APIs, or even modified by end users.

// Traditional static form - hardcoded structure
<template>
  <form>
    <input name="firstName" />
    <input name="lastName" />
    <input name="email" />
    <!-- Fixed structure, requires code changes to modify -->
  </form>
</template>

// Dynamic form - runtime-defined structure
const formSchema = {
  firstName: { type: 'field', label: 'First Name', required: true },
  lastName: { type: 'field', label: 'Last Name', required: true },
  email: { type: 'field', label: 'Email', rules: 'required|email' }
}
// Same form, but completely configurable without code changes

Why Dynamic Forms Are Powerful

1. Server-Driven UIs
Load form configurations from your backend, enabling you to modify forms without deploying new code.

2. User-Configurable Forms
Let non-technical users create and modify forms through admin interfaces.

3. Multi-Tenant Applications
Provide different form structures for different clients or use cases.

4. A/B Testing Forms
Easily test different form layouts and field configurations.

5. Conditional Complex Logic
Create forms that adapt based on user permissions, subscription levels, or business rules.

Use Cases: Where Dynamic Forms Shine

Content Management Systems

Challenge: Different content types need different input fields. Blog posts need titles and content, events need dates and locations, products need prices and categories.

Dynamic Solution:

// Load content type schemas from server
const blogPostSchema = {
  title: { type: 'field', label: 'Title', rules: 'required' },
  content: { type: 'field', label: 'Content', inputComponent: 'textarea' },
  tags: { type: 'repeatable', subfields: { name: { label: 'Tag' } } }
}

const eventSchema = {
  title: { type: 'field', label: 'Event Name', rules: 'required' },
  startDate: { type: 'field', label: 'Start Date', inputComponent: 'datepicker' },
  venue: { type: 'field', label: 'Venue', rules: 'required' },
  capacity: { type: 'field', label: 'Max Attendees', inputComponent: 'number' }
}

const productSchema = {
  name: { type: 'field', label: 'Product Name', rules: 'required' },
  price: { type: 'field', label: 'Price', inputComponent: 'currency' },
  variants: { 
    type: 'repeatable_table',
    subfields: {
      size: { label: 'Size' },
      color: { label: 'Color' },
      sku: { label: 'SKU', rules: 'required' }
    }
  }
}

// One component handles all content types
<EnformaSchema :schema="currentContentTypeSchema" />

Admin Dashboards

Challenge: Different user roles need different form fields. Super admins see all fields, managers see some, regular users see basic fields only.

Dynamic Solution:

// Server returns schema based on user permissions
const getUserProfileSchema = (userRole) => {
  const baseSchema = {
    firstName: { type: 'field', label: 'First Name', required: true },
    lastName: { type: 'field', label: 'Last Name', required: true },
    email: { type: 'field', label: 'Email', rules: 'required|email' }
  }

  if (userRole === 'manager' || userRole === 'admin') {
    baseSchema.department = {
      type: 'field',
      label: 'Department',
      inputComponent: 'select',
      inputProps: { options: ['Sales', 'Marketing', 'Engineering'] }
    }
  }

  if (userRole === 'admin') {
    baseSchema.permissions = {
      type: 'repeatable',
      label: 'Permissions',
      subfields: {
        resource: { label: 'Resource', rules: 'required' },
        actions: { 
          label: 'Actions',
          inputComponent: 'multiselect',
          inputProps: { options: ['read', 'write', 'delete'] }
        }
      }
    }
  }

  return baseSchema
}

Survey and Form Builders

Challenge: Non-technical users need to create complex forms without developer intervention.

Dynamic Solution:

// Form builder saves this configuration
const surveySchema = {
  intro_section: {
    type: 'section',
    title: 'Personal Information'
  },
  age: {
    type: 'field',
    section: 'intro_section',
    label: 'What is your age?',
    inputComponent: 'select',
    inputProps: {
      options: ['18-25', '26-35', '36-45', '46-55', '55+']
    }
  },
  experience_section: {
    type: 'section',
    title: 'Work Experience',
    if: '${form.values().age !== "18-25"}' // Conditional section
  },
  current_role: {
    type: 'field',
    section: 'experience_section',
    label: 'Current Job Role',
    if: '${form.values().age !== "18-25"}'
  }
}

// Survey gets rendered without any hardcoded components
<EnformaSchema :schema="loadedSurveySchema" />

How Enforma Processes JSON Schemas

Basic Schema Structure

Enforma uses a simple but powerful schema format:

const schema = {
  // SECTIONS - Group related fields
  personal_info: {
    type: 'section',
    title: 'Personal Information',
    titleComponent: 'h3'
  },

  // FIELDS - Individual form inputs
  firstName: {
    type: 'field',
    section: 'personal_info', // Belongs to personal_info section
    label: 'First Name',
    required: true,
    rules: 'required|min_length:2',
    inputProps: { placeholder: 'Enter your first name' }
  },

  // REPEATABLE FIELDS - Dynamic arrays
  skills: {
    type: 'repeatable_table',
    section: 'personal_info',
    subfields: {
      name: { label: 'Skill Name', rules: 'required' },
      level: { 
        label: 'Level',
        inputComponent: 'select',
        inputProps: { options: ['Beginner', 'Intermediate', 'Advanced'] }
      }
    }
  }
}

Schema Rendering Process

Schema Parsing: Enforma analyzes the schema structure
Component Resolution: Maps schema types to Vue components
Dynamic Evaluation: Processes expressions and conditional logic
Render Tree Creation: Builds the component tree
Reactive Updates: Updates components when data changes

<template>
  <!-- This single component renders the entire dynamic form -->
  <Enforma
    :schema="dynamicSchema"
    :data="formData"
    :rules="validationRules"
    :context="formContext"
  />
</template>

<script setup>
// Schema can come from anywhere - API, database, user input
const dynamicSchema = await fetchFormSchema('user-profile')

// Data structure matches the schema field names
const formData = {
  firstName: '',
  skills: []
}
</script>

Real-World Example: Building a Dynamic Job Application Form

Let's build a comprehensive job application form that adapts based on the job type and applicant responses:

// This schema could be stored in a database and loaded dynamically
const jobApplicationSchema = {
  // Basic Information Section
  basic_section: {
    type: 'section',
    title: 'Basic Information',
    titleComponent: 'h2'
  },

  firstName: {
    type: 'field',
    section: 'basic_section',
    label: 'First Name',
    required: true,
    rules: 'required|min_length:2'
  },

  lastName: {
    type: 'field',
    section: 'basic_section',
    label: 'Last Name',
    required: true,
    rules: 'required|min_length:2'
  },

  email: {
    type: 'field',
    section: 'basic_section',
    label: 'Email Address',
    required: true,
    rules: 'required|email',
    inputProps: { type: 'email' }
  },

  // Job-specific section that adapts based on job type
  position_section: {
    type: 'section',
    title: 'Position Information',
    titleComponent: 'h2'
  },

  jobType: {
    type: 'field',
    section: 'position_section',
    label: 'Job Type',
    required: true,
    inputComponent: 'select',
    inputProps: {
      options: ['Frontend Developer', 'Backend Developer', 'Full Stack Developer', 'Designer', 'Manager']
    }
  },

  // Technical Skills - Only for developer roles
  technical_section: {
    type: 'section',
    title: 'Technical Skills',
    titleComponent: 'h2',
    if: '${["Frontend Developer", "Backend Developer", "Full Stack Developer"].includes(form.values().jobType)}'
  },

  programmingLanguages: {
    type: 'repeatable_table',
    section: 'technical_section',
    if: '${["Frontend Developer", "Backend Developer", "Full Stack Developer"].includes(form.values().jobType)}',
    subfields: {
      language: {
        label: 'Programming Language',
        rules: 'required',
        inputComponent: 'select',
        inputProps: {
          options: ['JavaScript', 'TypeScript', 'Python', 'Java', 'Go', 'PHP', 'C#']
        }
      },
      experience: {
        label: 'Years of Experience',
        rules: 'required|numeric|gte:0',
        inputComponent: 'number',
        inputProps: { min: 0, max: 20 }
      },
      proficiency: {
        label: 'Proficiency Level',
        rules: 'required',
        inputComponent: 'select',
        inputProps: { options: ['Beginner', 'Intermediate', 'Advanced', 'Expert'] }
      }
    }
  },

  // Frontend-specific fields
  frontendFrameworks: {
    type: 'repeatable',
    section: 'technical_section',
    if: '${["Frontend Developer", "Full Stack Developer"].includes(form.values().jobType)}',
    label: 'Frontend Frameworks',
    subfields: {
      framework: {
        label: 'Framework',
        rules: 'required',
        inputComponent: 'select',
        inputProps: { options: ['Vue.js', 'React', 'Angular', 'Svelte'] }
      },
      projects: {
        label: 'Number of Projects',
        rules: 'required|numeric|gte:1',
        inputComponent: 'number'
      }
    }
  },

  // Backend-specific fields
  backendTechnologies: {
    type: 'repeatable_table',
    section: 'technical_section',
    if: '${["Backend Developer", "Full Stack Developer"].includes(form.values().jobType)}',
    subfields: {
      technology: {
        label: 'Backend Technology',
        rules: 'required',
        inputComponent: 'select',
        inputProps: { options: ['Node.js', 'Express', 'Django', 'Laravel', 'Spring Boot'] }
      },
      experience: {
        label: 'Years',
        rules: 'required|numeric|gte:0',
        inputComponent: 'number'
      }
    }
  },

  // Design Skills - Only for designer role
  design_section: {
    type: 'section',
    title: 'Design Skills',
    titleComponent: 'h2',
    if: '${form.values().jobType === "Designer"}'
  },

  designTools: {
    type: 'repeatable',
    section: 'design_section',
    if: '${form.values().jobType === "Designer"}',
    label: 'Design Tools',
    subfields: {
      tool: {
        label: 'Design Tool',
        rules: 'required',
        inputComponent: 'select',
        inputProps: { options: ['Figma', 'Sketch', 'Adobe XD', 'Photoshop', 'Illustrator'] }
      },
      proficiency: {
        label: 'Proficiency',
        rules: 'required',
        inputComponent: 'select',
        inputProps: { options: ['Beginner', 'Intermediate', 'Advanced', 'Expert'] }
      }
    }
  },

  portfolio: {
    type: 'field',
    section: 'design_section',
    if: '${form.values().jobType === "Designer"}',
    label: 'Portfolio URL',
    rules: 'required|url',
    inputProps: { placeholder: 'https://your-portfolio.com' }
  },

  // Management Experience - Only for manager role
  management_section: {
    type: 'section',
    title: 'Management Experience',
    titleComponent: 'h2',
    if: '${form.values().jobType === "Manager"}'
  },

  teamSize: {
    type: 'field',
    section: 'management_section',
    if: '${form.values().jobType === "Manager"}',
    label: 'Largest Team Size Managed',
    rules: 'required|integer|gte:1',
    inputComponent: 'number',
    inputProps: { min: 1 }
  },

  managementYears: {
    type: 'field',
    section: 'management_section',
    if: '${form.values().jobType === "Manager"}',
    label: 'Years of Management Experience',
    rules: 'required|numeric|gte:0',
    inputComponent: 'number',
    inputProps: { min: 0 }
  },

  // Experience Section - Always shown
  experience_section: {
    type: 'section',
    title: 'Work Experience',
    titleComponent: 'h2'
  },

  workExperience: {
    type: 'repeatable',
    section: 'experience_section',
    min: 1,
    max: 10,
    subfields: {
      company: {
        label: 'Company',
        rules: 'required'
      },
      position: {
        label: 'Position',
        rules: 'required'
      },
      startDate: {
        label: 'Start Date',
        rules: 'required|date',
        inputComponent: 'datepicker'
      },
      endDate: {
        label: 'End Date',
        rules: 'date|date_after:@workExperience.*.startDate',
        inputComponent: 'datepicker'
      },
      current: {
        label: 'Current Position',
        inputComponent: 'checkbox'
      },
      responsibilities: {
        label: 'Key Responsibilities',
        inputComponent: 'textarea',
        inputProps: { rows: 4 }
      }
    }
  }
}

Using the Dynamic Schema

<template>
  <div class="job-application">
    <h1>Job Application Form</h1>

    <Enforma
      :schema="jobApplicationSchema"
      :data="applicationData"
      :context="formContext"
      :submit-handler="submitApplication"
    />
  </div>
</template>

<script setup>
// The entire form is driven by the schema
const applicationData = {
  firstName: '',
  lastName: '',
  email: '',
  jobType: '',
  programmingLanguages: [],
  frontendFrameworks: [],
  backendTechnologies: [],
  designTools: [],
  portfolio: '',
  teamSize: null,
  managementYears: null,
  workExperience: [
    {
      company: '',
      position: '',
      startDate: '',
      endDate: '',
      current: false,
      responsibilities: ''
    }
  ]
}

// Context provides additional data and functions
const formContext = {
  // Could include user permissions, API endpoints, etc.
  userRole: 'applicant',
  availablePositions: ['Frontend Developer', 'Backend Developer']
}

const submitApplication = async (data) => {
  console.log('Submitting application:', data)
  // Submit to your API
  return true
}
</script>

Adding Validation to Dynamic Fields

Schema-Based Validation

Validation rules can be embedded directly in the schema:

const dynamicFormSchema = {
  email: {
    type: 'field',
    label: 'Email',
    rules: 'required|email',
    messages: {
      required: 'Email is required',
      email: 'Please enter a valid email address'
    }
  },

  password: {
    type: 'field',
    label: 'Password',
    inputProps: { type: 'password' },
    rules: 'required|min_length:8|regex:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)/',
    messages: {
      required: 'Password is required',
      min_length: 'Password must be at least 8 characters',
      regex: 'Password must contain lowercase, uppercase and number'
    }
  },

  confirmPassword: {
    type: 'field',
    label: 'Confirm Password',
    inputProps: { type: 'password' },
    rules: 'required|same:@password',
    messages: {
      required: 'Please confirm your password',
      same: 'Passwords must match'
    }
  },

  // Array validation
  skills: {
    type: 'repeatable',
    subfields: {
      name: {
        label: 'Skill Name',
        rules: 'required|min_length:2',
        messages: {
          required: 'Skill name is required'
        }
      },
      level: {
        label: 'Skill Level',
        rules: 'required|in_list:beginner,intermediate,advanced',
        inputComponent: 'select',
        inputProps: { options: ['beginner', 'intermediate', 'advanced'] }
      }
    }
  }
}

Dynamic Validation Rules

Create validation rules that adapt based on form state:

const adaptiveValidationSchema = {
  userType: {
    type: 'field',
    label: 'User Type',
    inputComponent: 'select',
    inputProps: { options: ['individual', 'business'] },
    rules: 'required'
  },

  // Individual users need personal info
  firstName: {
    type: 'field',
    label: 'First Name',
    if: '${form.values().userType === "individual"}',
    rules: 'required_if:userType,individual'
  },

  lastName: {
    type: 'field',
    label: 'Last Name', 
    if: '${form.values().userType === "individual"}',
    rules: 'required_if:userType,individual'
  },

  // Business users need company info
  companyName: {
    type: 'field',
    label: 'Company Name',
    if: '${form.values().userType === "business"}',
    rules: 'required_if:userType,business'
  },

  taxId: {
    type: 'field',
    label: 'Tax ID',
    if: '${form.values().userType === "business"}',
    rules: 'required_if:userType,business|regex:/^[0-9]{2}-[0-9]{7}$/',
    messages: {
      regex: 'Tax ID must be in format XX-XXXXXXX'
    }
  }
}

Handling Schema Changes Dynamically

Live Schema Updates

Update schemas in real-time based on user actions or external events:

<template>
  <div>
    <!-- Admin controls -->
    <div class="admin-panel" v-if="isAdmin">
      <h3>Form Configuration</h3>
      <button @click="addField">Add Field</button>
      <button @click="toggleSection('skills')">Toggle Skills Section</button>
    </div>

    <!-- Dynamic form that updates live -->
    <Enforma
      :schema="liveSchema"
      :data="formData"
      :key="schemaVersion" 
    />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const schemaVersion = ref(0)
const liveSchema = reactive({
  name: {
    type: 'field',
    label: 'Name',
    required: true
  }
})

const addField = () => {
  const fieldName = `dynamicField${Date.now()}`
  liveSchema[fieldName] = {
    type: 'field',
    label: 'Dynamic Field',
    required: false
  }
  schemaVersion.value++
}

const toggleSection = (sectionName) => {
  if (liveSchema[sectionName]) {
    delete liveSchema[sectionName]
  } else {
    liveSchema[sectionName] = {
      type: 'section',
      title: 'Skills Section'
    }
  }
  schemaVersion.value++
}
</script>

Server-Driven Schema Updates

Load and update schemas from your backend:

// API-driven schema management
class DynamicFormManager {
  constructor() {
    this.schema = reactive({})
    this.formData = reactive({})
  }

  async loadSchema(formId) {
    try {
      const response = await fetch(`/api/forms/${formId}/schema`)
      const schemaData = await response.json()

      // Replace current schema
      Object.assign(this.schema, schemaData.schema)
      Object.assign(this.formData, schemaData.defaultData)

      return true
    } catch (error) {
      console.error('Failed to load schema:', error)
      return false
    }
  }

  async updateField(fieldName, fieldConfig) {
    // Update locally first for immediate feedback
    this.schema[fieldName] = fieldConfig

    // Sync with server
    try {
      await fetch(`/api/forms/schema/field`, {
        method: 'PATCH',
        body: JSON.stringify({ fieldName, fieldConfig })
      })
    } catch (error) {
      console.error('Failed to sync field update:', error)
    }
  }

  async addConditionalField(condition, fieldConfig) {
    const fieldName = `conditional_${Date.now()}`

    this.schema[fieldName] = {
      ...fieldConfig,
      if: condition
    }

    // Sync with server
    await this.syncSchema()
  }

  async syncSchema() {
    await fetch('/api/forms/schema', {
      method: 'PUT',
      body: JSON.stringify({ schema: this.schema })
    })
  }
}

// Usage
const formManager = new DynamicFormManager()
await formManager.loadSchema('user-registration')

Schema Versioning and Migration

Handle schema changes gracefully:

class SchemaVersionManager {
  constructor() {
    this.migrations = {
      '1.0.0': this.migrateToV1,
      '1.1.0': this.migrateToV1_1,
      '2.0.0': this.migrateToV2
    }
  }

  async loadSchema(formId) {
    const schemaData = await fetch(`/api/forms/${formId}`).then(r => r.json())

    // Check if migration is needed
    if (schemaData.version !== this.currentVersion) {
      return this.migrateSchema(schemaData)
    }

    return schemaData.schema
  }

  migrateSchema(schemaData) {
    let { schema, version } = schemaData

    // Apply migrations in order
    for (const [targetVersion, migrationFn] of Object.entries(this.migrations)) {
      if (this.isVersionNewer(targetVersion, version)) {
        schema = migrationFn(schema)
        version = targetVersion
      }
    }

    return schema
  }

  migrateToV1_1(schema) {
    // Example: Convert old 'type' field to new 'inputComponent'
    Object.keys(schema).forEach(key => {
      const field = schema[key]
      if (field.type === 'field' && field.fieldType) {
        field.inputComponent = field.fieldType
        delete field.fieldType
      }
    })
    return schema
  }

  migrateToV2(schema) {
    // Example: Restructure validation rules
    Object.keys(schema).forEach(key => {
      const field = schema[key]
      if (field.validation) {
        field.rules = field.validation.join('|')
        delete field.validation
      }
    })
    return schema
  }
}

Advanced Ideas: Plugin-Based Form Extensions

Custom Field Types

Extend Enforma with your own field types:

// Register custom field type
const customFieldTypes = {
  'location-picker': {
    component: LocationPickerField,
    defaultProps: {
      apiKey: process.env.GOOGLE_MAPS_API_KEY
    }
  },
  'rich-text-editor': {
    component: RichTextEditor,
    defaultProps: {
      toolbar: ['bold', 'italic', 'link']
    }
  },
  'signature-pad': {
    component: SignaturePad,
    defaultProps: {
      width: 400,
      height: 200
    }
  }
}

// Use in schema
const extendedSchema = {
  address: {
    type: 'field',
    label: 'Your Location',
    inputComponent: 'location-picker',
    inputProps: {
      defaultLocation: 'San Francisco, CA'
    }
  },

  description: {
    type: 'field',
    label: 'Description',
    inputComponent: 'rich-text-editor',
    inputProps: {
      minLength: 100
    }
  },

  signature: {
    type: 'field',
    label: 'Digital Signature',
    inputComponent: 'signature-pad',
    required: true
  }
}

Schema Plugins System

Create a plugin system for schema transformations:

class SchemaPluginSystem {
  constructor() {
    this.plugins = []
  }

  addPlugin(plugin) {
    this.plugins.push(plugin)
  }

  processSchema(schema, context) {
    return this.plugins.reduce((processedSchema, plugin) => {
      return plugin.transform(processedSchema, context)
    }, schema)
  }
}

// Example plugins
const conditionalFieldsPlugin = {
  name: 'conditional-fields',
  transform(schema, context) {
    // Add conditional logic based on user permissions
    if (!context.user.canEditAdvanced) {
      Object.keys(schema).forEach(key => {
        if (schema[key].advanced) {
          delete schema[key]
        }
      })
    }
    return schema
  }
}

const localizationPlugin = {
  name: 'localization',
  transform(schema, context) {
    // Translate labels based on user locale
    const locale = context.user.locale || 'en'

    Object.keys(schema).forEach(key => {
      const field = schema[key]
      if (field.label && field.translations) {
        field.label = field.translations[locale] || field.label
      }
    })
    return schema
  }
}

// Usage
const pluginSystem = new SchemaPluginSystem()
pluginSystem.addPlugin(conditionalFieldsPlugin)
pluginSystem.addPlugin(localizationPlugin)

const processedSchema = pluginSystem.processSchema(originalSchema, {
  user: { canEditAdvanced: false, locale: 'es' }
})

Complete Example: Multi-Tenant Survey Platform

Here's a comprehensive example showing all concepts together:

<template>
  <div class="survey-platform">
    <div class="survey-header">
      <h1>{{ surveyTitle }}</h1>
      <p>{{ surveyDescription }}</p>
    </div>

    <!-- Dynamic form renders based on loaded schema -->
    <Enforma
      :schema="processedSchema"
      :data="responseData"
      :context="surveyContext"
      :submit-handler="submitSurvey"
      @field-change="handleFieldChange"
    >
      <!-- Custom slot for special field types -->
      <template #field(rating)="{ field }">
        <StarRating 
          :value="field.value"
          :max="field.inputProps.max || 5"
          @input="field.events.input"
        />
      </template>
    </Enforma>

    <!-- Progress indicator -->
    <div class="survey-progress">
      <div class="progress-bar">
        <div 
          class="progress-fill"
          :style="{ width: `${progressPercent}%` }"
        ></div>
      </div>
      <span>{{ progressPercent }}% Complete</span>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'

const props = defineProps({
  surveyId: { type: String, required: true },
  userId: { type: String, required: true }
})

// Reactive state
const surveyTitle = ref('')
const surveyDescription = ref('')
const originalSchema = reactive({})
const responseData = reactive({})
const processedSchema = computed(() => processSchemaWithLogic(originalSchema))

// Survey context for dynamic expressions
const surveyContext = reactive({
  userId: props.userId,
  startTime: Date.now(),

  // Helper functions for schema expressions
  calculateAge(birthYear) {
    return new Date().getFullYear() - birthYear
  },

  hasAnswered(fieldName) {
    return !!responseData[fieldName]
  },

  getConditionalQuestions(category) {
    // Load additional questions based on previous answers
    return this.questionBank[category] || []
  }
})

// Progress calculation
const progressPercent = computed(() => {
  const totalFields = Object.keys(processedSchema.value).filter(
    key => processedSchema.value[key].type === 'field'
  ).length

  const answeredFields = Object.values(responseData).filter(
    value => value !== null && value !== '' && value !== undefined
  ).length

  return totalFields > 0 ? Math.round((answeredFields / totalFields) * 100) : 0
})

// Load survey configuration
onMounted(async () => {
  try {
    const surveyData = await fetch(`/api/surveys/${props.surveyId}`).then(r => r.json())

    surveyTitle.value = surveyData.title
    surveyDescription.value = surveyData.description

    // Process schema with tenant-specific rules
    Object.assign(originalSchema, surveyData.schema)

    // Initialize response data
    initializeResponseData(surveyData.schema)

  } catch (error) {
    console.error('Failed to load survey:', error)
  }
})

// Initialize form data based on schema
const initializeResponseData = (schema) => {
  Object.keys(schema).forEach(key => {
    const field = schema[key]
    if (field.type === 'field') {
      responseData[key] = field.defaultValue || null
    } else if (field.type === 'repeatable') {
      responseData[key] = []
    }
  })
}

// Process schema with conditional logic
const processSchemaWithLogic = (schema) => {
  const processed = { ...schema }

  // Add conditional fields based on previous answers
  if (responseData.experienceLevel === 'advanced') {
    processed.advancedQuestions = {
      type: 'section',
      title: 'Advanced Questions'
    }

    processed.technicalChallenge = {
      type: 'field',
      section: 'advancedQuestions',
      label: 'Describe your biggest technical challenge',
      inputComponent: 'textarea',
      required: true
    }
  }

  return processed
}

// Handle field changes for dynamic behavior
const handleFieldChange = ({ fieldName, value }) => {
  console.log(`Field ${fieldName} changed to:`, value)

  // Trigger conditional logic
  if (fieldName === 'country') {
    updateStateOptions(value)
  }

  if (fieldName === 'age' && value > 65) {
    addSeniorDiscountField()
  }
}

// Dynamic form modifications
const updateStateOptions = (country) => {
  if (originalSchema.state) {
    const stateOptions = getStatesByCountry(country)
    originalSchema.state.inputProps.options = stateOptions
  }
}

const addSeniorDiscountField = () => {
  if (!originalSchema.seniorDiscount) {
    originalSchema.seniorDiscount = {
      type: 'field',
      label: 'Apply Senior Discount',
      inputComponent: 'checkbox',
      defaultValue: true
    }
    responseData.seniorDiscount = true
  }
}

// Submit survey response
const submitSurvey = async (data) => {
  try {
    const response = await fetch(`/api/surveys/${props.surveyId}/responses`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        userId: props.userId,
        responses: data,
        completedAt: new Date().toISOString(),
        timeTaken: Date.now() - surveyContext.startTime
      })
    })

    if (response.ok) {
      alert('Survey submitted successfully!')
      return true
    } else {
      throw new Error('Submission failed')
    }
  } catch (error) {
    console.error('Survey submission error:', error)
    alert('Failed to submit survey. Please try again.')
    return false
  }
}
</script>

Final Thoughts: The Future of Form Development

Dynamic forms represent a fundamental shift in how we approach form development. Instead of writing components for every possible form variation, we define flexible schemas that can adapt to any requirement.

The Benefits You Gain

✓ Rapid Development: Create complex forms in minutes, not hours

✓ Non-Technical Empowerment: Allow business users to modify forms

✓ Consistent UI: Maintain design system compliance automatically

✓ Easy Maintenance: Update forms without code deployment

✓ Enhanced Flexibility: Adapt forms based on any criteria

✓ Better Testing: Test form logic separately from presentation

Best Practices for Dynamic Forms

Start Simple: Begin with basic schemas and add complexity gradually
Plan Your Schema Structure: Design schemas that are intuitive and maintainable
Use Validation Liberally: Embed validation rules in schemas for consistency
Implement Graceful Fallbacks: Handle schema loading errors elegantly
Version Your Schemas: Plan for schema evolution and migration
Test Thoroughly: Validate schemas in different contexts and configurations

Advanced Extensions

The possibilities with dynamic forms are endless:

AI-Generated Forms: Use machine learning to generate optimal form structures
A/B Testing Integration: Automatically test different form configurations
Analytics Integration: Track form performance and optimize based on data
Multi-Language Support: Dynamically translate forms based on user locale
Accessibility Enhancements: Automatically apply accessibility improvements

Ready to Transform Your Forms?

Dynamic forms with Enforma eliminate the traditional boundaries between developers and business requirements. Whether you're building admin panels, survey platforms, or complex data entry systems, schema-driven forms provide the flexibility and power you need.

Start building your first dynamic form today:

npm install @encolajs/enforma

Explore Dynamic Form Examples →

The future of form development is dynamic, flexible, and powerful. With Enforma's schema-driven architecture, that future is available today.

Mastering Nested Forms in Enforma VueJS

Adrian Miu — Mon, 16 Jun 2025 05:52:00 +0000

Building forms with nested data structures is one of the challenging aspects of modern web development. Whether you're creating an e-commerce checkout flow with shipping and billing addresses, a user profile with nested preferences, or a job application with multiple experience entries, nested forms can quickly become a tangled mess of reactive watchers, complex v-model bindings, and fragile state management.

If you've ever found yourself wrestling with deeply nested form data, struggling with array validation, or writing repetitive code for add/remove/reorder functionality, you understand why nested forms matter—and why they're so difficult to get right.

Why Nested Forms Matter in Real-World Applications

E-commerce Checkout: The Classic Example

Consider a typical e-commerce checkout form that needs to handle:

// The data structure every e-commerce site needs
const checkout = {
  customer: {
    firstName: "John",
    lastName: "Doe",
    email: "john@example.com"
  },
  shippingAddress: {
    street: "123 Main St",
    city: "Springfield",
    state: "IL",
    zipCode: "62701"
  },
  billingAddress: {
    // Same structure, or "same as shipping"
  },
  items: [
    {
      productId: "abc-123",
      quantity: 2,
      price: 29.99,
      customizations: {
        size: "L",
        color: "blue",
        engraving: "Happy Birthday!"
      }
    }
  ],
  paymentMethods: [
    {
      type: "credit_card",
      cardNumber: "****-****-****-1234",
      primary: true
    }
  ]
}

Job Applications and User Profiles

Modern applications often require complex nested structures:

// Professional profile with dynamic arrays
const resume = {
  personal: {
    firstName: "Sarah",
    lastName: "Chen",
    email: "sarah@example.com"
  },
  experience: [
    {
      company: "Tech Corp",
      position: "Senior Developer",
      startDate: "2020-01-15",
      endDate: "2023-08-30",
      responsibilities: [
        "Led development of user dashboard",
        "Mentored junior developers"
      ],
      technologies: ["Vue", "Node.js", "PostgreSQL"]
    }
  ],
  education: [
    {
      institution: "State University",
      degree: "Computer Science",
      graduationYear: 2019,
      courses: ["Data Structures", "Web Development"]
    }
  ],
  skills: [
    { name: "JavaScript", level: "Expert", years: 8 },
    { name: "Vue.js", level: "Advanced", years: 5 }
  ]
}

The Traditional Challenges with v-model and Deep Nested Data

Complex v-model Bindings

The traditional Vue approach becomes unwieldy quickly:

<template>
  <!-- The nightmare of nested v-model bindings -->
  <input v-model="form.customer.firstName" />
  <input v-model="form.customer.lastName" />

  <!-- Arrays are even worse -->
  <div v-for="(item, index) in form.items" :key="index">
    <input v-model="form.items[index].quantity" />
    <input v-model="form.items[index].customizations.size" />
    <select v-model="form.items[index].customizations.color">
      <!-- options -->
    </select>
  </div>

  <!-- Dynamic experiences -->
  <div v-for="(exp, index) in form.experience" :key="index">
    <input v-model="form.experience[index].company" />
    <input v-model="form.experience[index].position" />

    <!-- Nested arrays within arrays -->
    <div v-for="(tech, techIndex) in exp.technologies" :key="techIndex">
      <input v-model="form.experience[index].technologies[techIndex]" />
    </div>
  </div>
</template>

<script>
// 200+ lines of reactive state management...
const form = reactive({
  customer: { firstName: '', lastName: '', email: '' },
  items: [],
  experience: []
})

// Complex watchers for validation
watch(() => form.customer.email, (newEmail) => {
  // Email validation logic
})

// Manual array management
const addExperience = () => {
  form.experience.push({
    company: '',
    position: '',
    technologies: []
  })
}

const removeExperience = (index) => {
  form.experience.splice(index, 1)
}
</script>

Validation Nightmare

Cross-field validation and nested validation rules become incredibly complex:

// The validation spaghetti you're forced to write
const validateForm = () => {
  // Clear previous errors
  errors.value = {}

  // Validate customer info
  if (!form.customer.firstName) {
    errors.value['customer.firstName'] = 'First name is required'
  }

  // Validate each item
  form.items.forEach((item, index) => {
    if (!item.quantity || item.quantity < 1) {
      errors.value[`items.${index}.quantity`] = 'Quantity must be at least 1'
    }
    if (item.customizations.size && !item.customizations.color) {
      errors.value[`items.${index}.customizations.color`] = 'Color required when size is specified'
    }
  })

  // Validate experience dates
  form.experience.forEach((exp, index) => {
    if (exp.endDate && exp.startDate && exp.endDate < exp.startDate) {
      errors.value[`experience.${index}.endDate`] = 'End date must be after start date'
    }
  })
}

Enforma's Elegant Approach to Nested Forms

Enforma transforms this complexity into clean, maintainable code through powerful abstraction and intelligent handling of nested structures.

Simple Dot Notation for Deep Paths

Instead of complex v-model bindings, Enforma uses intuitive dot notation:

<template>
  <Enforma :data="formData" :rules="validationRules">
    <!-- Clean, readable field definitions -->
    <EnformaField name="customer.firstName" label="First Name" />
    <EnformaField name="customer.lastName" label="Last Name" />
    <EnformaField name="customer.email" label="Email" />

    <!-- Nested addresses -->
    <EnformaSection title="Shipping Address">
      <EnformaField name="shippingAddress.street" label="Street" />
      <EnformaField name="shippingAddress.city" label="City" />
      <EnformaField name="shippingAddress.state" label="State" />
    </EnformaSection>
  </Enforma>
</template>

<script setup>
// Clean, declarative data structure
const formData = {
  customer: {
    firstName: '',
    lastName: '',
    email: ''
  },
  shippingAddress: {
    street: '',
    city: '',
    state: ''
  }
}

// Simple validation rules using the same dot notation
const validationRules = {
  'customer.firstName': 'required',
  'customer.lastName': 'required', 
  'customer.email': 'required|email',
  'shippingAddress.street': 'required',
  'shippingAddress.city': 'required'
}
</script>

Powerful Array Management with EnformaRepeatable

For dynamic arrays, Enforma provides the EnformaRepeatable component:

<template>
  <Enforma :data="formData" :rules="validationRules">
    <!-- Professional Experience Array -->
    <EnformaRepeatable name="experience" add-label="Add Experience">
      <template #default="{ value, add, remove, canRemove, index }">
        <div v-for="(exp, i) in value" :key="i" class="experience-item">
          <h4>Experience {{ i + 1 }}</h4>

          <div class="grid grid-cols-2 gap-4">
            <EnformaField 
              :name="`experience.${i}.company`" 
              label="Company" 
            />
            <EnformaField 
              :name="`experience.${i}.position`" 
              label="Position" 
            />
          </div>

          <div class="grid grid-cols-2 gap-4">
            <EnformaField 
              :name="`experience.${i}.startDate`" 
              label="Start Date"
              input="date"
            />
            <EnformaField 
              :name="`experience.${i}.endDate`" 
              label="End Date"
              input="date"
            />
          </div>

          <!-- Nested skills array within experience -->
          <EnformaRepeatable :name="`experience.${i}.technologies`">
            <template #default="{ value: techs, add: addTech, remove: removeTech }">
              <div class="technologies">
                <label>Technologies:</label>
                <div v-for="(tech, techIndex) in techs" :key="techIndex" class="tech-item">
                  <EnformaField 
                    :name="`experience.${i}.technologies.${techIndex}`" 
                    placeholder="Technology name"
                  />
                  <button @click="removeTech(techIndex)">Remove</button>
                </div>
                <button @click="addTech('')">Add Technology</button>
              </div>
            </template>
          </EnformaRepeatable>

          <button @click="remove(i)" :disabled="!canRemove">
            Remove Experience
          </button>
        </div>

        <button @click="add({ company: '', position: '', technologies: [] })">
          Add Experience
        </button>
      </template>
    </EnformaRepeatable>
  </Enforma>
</template>

<script setup>
const formData = {
  experience: [
    {
      company: '',
      position: '',
      startDate: '',
      endDate: '',
      technologies: []
    }
  ]
}

// Array validation using wildcard notation
const validationRules = {
  'experience.*.company': 'required',
  'experience.*.position': 'required',
  'experience.*.startDate': 'required|date',
  'experience.*.endDate': 'date|date_after:@experience.*.startDate',
  'experience.*.technologies.*': 'required'
}
</script>

Advanced Nested Form Patterns

Conditional Nested Sections

Handle complex conditional logic within nested structures:

<template>
  <Enforma :data="formData" :rules="validationRules">
    <!-- Address Information -->
    <EnformaField name="shippingAddress.street" label="Shipping Street" />
    <EnformaField name="shippingAddress.city" label="Shipping City" />

    <!-- Conditional billing address -->
    <EnformaField 
      name="sameAsBilling" 
      input="checkbox" 
      label="Billing address same as shipping"
    />

    <!-- Only show billing fields if different from shipping -->
    <div v-if="!formData.sameAsBilling">
      <EnformaField name="billingAddress.street" label="Billing Street" />
      <EnformaField name="billingAddress.city" label="Billing City" />
    </div>

    <!-- Order items with dynamic customizations -->
    <EnformaRepeatable name="items">
      <template #default="{ value, add, remove }">
        <div v-for="(item, index) in value" :key="index">
          <EnformaField 
            :name="`items.${index}.productName`" 
            label="Product"
          />

          <!-- Show customization fields based on product type -->
          <div v-if="item.productName === 'T-Shirt'">
            <EnformaField 
              :name="`items.${index}.customizations.size`"
              label="Size"
              input="select"
              :options="['S', 'M', 'L', 'XL']"
            />
            <EnformaField 
              :name="`items.${index}.customizations.color`"
              label="Color"
              input="select"
              :options="['Red', 'Blue', 'Green']"
            />
          </div>

          <div v-if="item.productName === 'Mug'">
            <EnformaField 
              :name="`items.${index}.customizations.engraving`"
              label="Custom Engraving"
              input="textarea"
            />
          </div>
        </div>
      </template>
    </EnformaRepeatable>
  </Enforma>
</template>

Cross-Field Validation in Nested Data

Enforma's validation system excels at handling complex relationships:

const validationRules = {
  // Basic field validation
  'shippingAddress.street': 'required',
  'shippingAddress.city': 'required',

  // Conditional validation - billing required if different from shipping
  'billingAddress.street': 'required_unless:sameAsBilling,true',
  'billingAddress.city': 'required_unless:sameAsBilling,true',

  // Array validation with cross-references
  'items.*.quantity': 'required|integer|min:1',
  'items.*.customizations.size': 'required_if:items.*.productName,T-Shirt',
  'items.*.customizations.color': 'required_if:items.*.productName,T-Shirt',
  'items.*.customizations.engraving': 'required_if:items.*.productName,Mug',

  // Date range validation across experience entries
  'experience.*.startDate': 'required|date',
  'experience.*.endDate': 'date|date_after:@experience.*.startDate',

  // Complex business rules
  'experience.*.salary': 'numeric|gte:@experience.*.minSalary'
}

Handling Array Operations: Add, Remove, Reorder

Smart Array Management

Enforma handles all the complex array operations automatically:

<template>
  <EnformaRepeatable 
    name="teamMembers" 
    :min="1" 
    :max="10"
    :allow-sort="true"
  >
    <template #default="{ value, add, remove, moveUp, moveDown, canAdd, canRemove }">
      <div v-for="(member, index) in value" :key="index" class="team-member">
        <div class="member-fields">
          <EnformaField 
            :name="`teamMembers.${index}.name`" 
            label="Name"
          />
          <EnformaField 
            :name="`teamMembers.${index}.role`" 
            label="Role"
          />
          <EnformaField 
            :name="`teamMembers.${index}.email`" 
            label="Email"
          />
        </div>

        <div class="member-actions">
          <!-- Reorder buttons -->
          <button 
            @click="moveUp(index)" 
            :disabled="index === 0"
            title="Move up"
          >
            ↑
          </button>
          <button 
            @click="moveDown(index)" 
            :disabled="index === value.length - 1"
            title="Move down"
          >
            ↓
          </button>

          <!-- Remove button -->
          <button 
            @click="remove(index)" 
            :disabled="!canRemove"
            title="Remove member"
          >
            Remove
          </button>
        </div>
      </div>

      <!-- Add button -->
      <button 
        @click="add({ name: '', role: '', email: '' })" 
        :disabled="!canAdd"
      >
        Add Team Member
      </button>

      <!-- Status feedback -->
      <div class="array-status">
        {{ value.length }} of {{ max }} members
        <span v-if="!canAdd">(Maximum reached)</span>
      </div>
    </template>
  </EnformaRepeatable>
</template>

Real-World Example: Complete E-commerce Checkout

Here's a comprehensive example showing all the concepts together:

<template>
  <div class="checkout-form">
    <h1>Checkout</h1>

    <EnformaSchema
      :schema="checkoutSchema"
      :data="formData"
      :rules="validationRules"
      :submit-handler="processOrder"
    >
      <!-- Custom slot for special handling -->
      <template #field(paymentMethods)>
        <div class="payment-methods">
          <h3>Payment Methods</h3>
          <EnformaRepeatable name="paymentMethods" :min="1">
            <template #default="{ value, add, remove }">
              <div v-for="(method, index) in value" :key="index" class="payment-method">
                <EnformaField 
                  :name="`paymentMethods.${index}.type`"
                  label="Payment Type"
                  input="select"
                  :options="['credit_card', 'debit_card', 'paypal']"
                />

                <!-- Credit card specific fields -->
                <div v-if="method.type === 'credit_card'">
                  <EnformaField 
                    :name="`paymentMethods.${index}.cardNumber`"
                    label="Card Number"
                    input="text"
                    placeholder="1234 5678 9012 3456"
                  />
                  <div class="card-row">
                    <EnformaField 
                      :name="`paymentMethods.${index}.expiryDate`"
                      label="Expiry"
                      placeholder="MM/YY"
                    />
                    <EnformaField 
                      :name="`paymentMethods.${index}.cvv`"
                      label="CVV"
                      input="password"
                      placeholder="123"
                    />
                  </div>
                </div>

                <!-- PayPal specific fields -->
                <div v-if="method.type === 'paypal'">
                  <EnformaField 
                    :name="`paymentMethods.${index}.paypalEmail`"
                    label="PayPal Email"
                    input="email"
                  />
                </div>

                <EnformaField 
                  :name="`paymentMethods.${index}.primary`"
                  input="checkbox"
                  label="Primary payment method"
                />
              </div>
            </template>
          </EnformaRepeatable>
        </div>
      </template>
    </EnformaSchema>
  </div>
</template>

<script setup>
const checkoutSchema = {
  // Customer Information
  customer_section: {
    type: 'section',
    title: 'Customer Information'
  },
  'customer.firstName': {
    type: 'field',
    section: 'customer_section',
    label: 'First Name',
    required: true
  },
  'customer.lastName': {
    type: 'field',
    section: 'customer_section', 
    label: 'Last Name',
    required: true
  },
  'customer.email': {
    type: 'field',
    section: 'customer_section',
    label: 'Email',
    required: true
  },

  // Shipping Address
  shipping_section: {
    type: 'section',
    title: 'Shipping Address'
  },
  'shippingAddress.street': {
    type: 'field',
    section: 'shipping_section',
    label: 'Street Address',
    required: true
  },
  'shippingAddress.city': {
    type: 'field',
    section: 'shipping_section',
    label: 'City',
    required: true
  },

  // Same as shipping checkbox
  sameAsBilling: {
    type: 'field',
    section: 'shipping_section',
    type: 'checkbox',
    label: 'Billing address same as shipping'
  },

  // Order Items
  items_section: {
    type: 'section',
    title: 'Order Items'
  },
  items: {
    type: 'repeatable_table',
    section: 'items_section',
    subfields: {
      productName: {
        label: 'Product',
        required: true
      },
      quantity: {
        label: 'Quantity',
        type: 'number',
        min: 1,
        required: true
      },
      price: {
        label: 'Unit Price',
        type: 'number',
        readonly: true
      }
    }
  }
}

const formData = {
  customer: {
    firstName: '',
    lastName: '',
    email: ''
  },
  shippingAddress: {
    street: '',
    city: '',
    state: '',
    zipCode: ''
  },
  billingAddress: {
    street: '',
    city: '',
    state: '',
    zipCode: ''
  },
  sameAsBilling: true,
  items: [
    { productName: '', quantity: 1, price: 0 }
  ],
  paymentMethods: [
    { type: 'credit_card', primary: true }
  ]
}

const validationRules = {
  'customer.firstName': 'required',
  'customer.lastName': 'required',
  'customer.email': 'required|email',
  'shippingAddress.street': 'required',
  'shippingAddress.city': 'required',
  'billingAddress.street': 'required_unless:sameAsBilling,true',
  'billingAddress.city': 'required_unless:sameAsBilling,true',
  'items.*.productName': 'required',
  'items.*.quantity': 'required|integer|min:1',
  'paymentMethods.*.type': 'required',
  'paymentMethods.*.cardNumber': 'required_if:paymentMethods.*.type,credit_card|credit_card',
  'paymentMethods.*.expiryDate': 'required_if:paymentMethods.*.type,credit_card',
  'paymentMethods.*.cvv': 'required_if:paymentMethods.*.type,credit_card|digits:3',
  'paymentMethods.*.paypalEmail': 'required_if:paymentMethods.*.type,paypal|email'
}

const processOrder = async (data) => {
  console.log('Processing order:', data)
  // Handle order submission
  return true
}
</script>

Best Practices for Nested Forms

1. Structure Your Data Thoughtfully

Plan your nested data structure to match your business logic:

// Good: Logical grouping
{
  customer: { /* customer info */ },
  shipping: { /* shipping details */ },
  billing: { /* billing details */ },
  items: [ /* order items */ ]
}

// Avoid: Flat structure that should be nested
{
  customerFirstName: '',
  customerLastName: '',
  shippingStreet: '',
  shippingCity: '',
  item1Name: '',
  item1Quantity: 0
  // This becomes unmanageable quickly
}

2. Use Validation Rules Effectively

Take advantage of Enforma's powerful validation system:

const validationRules = {
  // Array validation with wildcards
  'experience.*.company': 'required',
  'experience.*.startDate': 'required|date',

  // Cross-field validation with @ references
  'experience.*.endDate': 'date|date_after:@experience.*.startDate',

  // Conditional validation
  'billingAddress.street': 'required_unless:sameAsBilling,true',

  // Complex business rules
  'items.*.quantity': 'required|integer|min:1|max:@items.*.maxAvailable'
}

Final Thoughts: Nested Forms Made Simple

Enforma transforms the traditionally complex challenge of nested forms into an elegant, maintainable solution. Whether you're building simple contact forms with address sections or complex multi-step applications with dynamic arrays, Enforma's approach provides:

✓ Clean, readable code with intuitive dot notation

✓ Powerful array management with automatic add/remove/reorder

✓ Robust validation including cross-field and nested rules

✓ Performance optimization for large, complex forms

✓ Flexible rendering options from headless to schema-driven

The result? You can focus on building great user experiences instead of wrestling with form state management. Your nested forms become a competitive advantage rather than a development bottleneck.

Ready to master nested forms? Install Enforma and transform your most complex forms into clean, maintainable code.

npm install @encolajs/enforma

Get Started with Enforma →

A Step-by-Step Guide to Building Your First Vue Form with Enforma

Adrian Miu — Wed, 11 Jun 2025 05:27:00 +0000

Building forms in Vue.js doesn't have to be complicated. Whether you're a beginner just getting started with Vue forms or an experienced developer looking to streamline your form development process, this tutorial will walk you through creating your first dynamic form with Enforma from start to finish.

By the end of this guide, you'll have built a complete user registration form with validation, nested fields, and repeatable sections—all with minimal boilerplate code.

What We'll Build

In this tutorial, we'll create a comprehensive user registration form that includes:

Basic field validation (name, email, password)
Cross-field validation (password confirmation)
Nested data handling (address information)

Step 1: Installing and Setting Up Enforma

First, let's install Enforma in your Vue 3 project:

npm install @encolajs/enforma

Next, set up the Enforma plugin in your main application file:

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { EnformaPlugin } from '@encolajs/enforma'
import useDefaultPreset from '@encolajs/presets/default'

const app = createApp(App)
app.use(EnformaPlugin)
app.mount('#app')

// Enforma is UI agnostic
// The default preset lets you use the HTML input fields 
useDefaultPreset()

That's it! Enforma is now ready to use in your Vue application.

Optional: UI Framework Integration

If you're using a UI framework like PrimeVue, Vuetify, or Quasar, you can use Enforma's built-in presets for seamless integration:

// For PrimeVue users
import { usePrimeVuePreset } from '@encolajs/enforma/presets/primevue'
usePrimeVuePreset()

// For Vuetify users  
import { useVuetifyPreset } from '@encolajs/enforma/presets/vuetify'
useVuetifyPreset()

// For Quasar users
import { useQuasarPreset } from '@encolajs/enforma/presets/quasar'
useQuasarPreset()

Step 2: Creating Your First Simple Form

Let's start with a basic contact form to understand Enforma's fundamentals:

<template>
  <div class="max-w-md mx-auto p-6">
    <h2 class="text-2xl font-bold mb-6">Contact Us</h2>

    <Enforma 
      :data="formData" 
      :rules="validationRules" 
      :submit-handler="handleSubmit"
    >
      <EnformaField 
        name="name" 
        label="Full Name" 
        required
      />

      <EnformaField 
        name="email" 
        label="Email Address" 
        required
      />

      <EnformaField 
        name="message" 
        label="Message"
        input-component="textarea"
        required
      />

      <template #actions>
        <EnformaSubmitButton class="w-full bg-blue-500 text-white py-2 px-4 rounded">
          Send Message
        </EnformaSubmitButton>
      </template>
    </Enforma>
  </div>
</template>

<script setup>
import { Enforma, EnformaField, EnformaSubmitButton } from '@encolajs/enforma'

const formData = {
  name: '',
  email: '',
  message: ''
}

const validationRules = {
  name: 'required',
  email: 'required|email',
  message: 'required|min:10'
}

const handleSubmit = async (data) => {
  console.log('Form submitted:', data)
  // Here you would typically send the data to your API
  return true
}
</script>

Step 3: Adding Advanced Validation

Now let's enhance our form with more sophisticated validation rules and custom error messages:

<template>
  <div class="max-w-md mx-auto p-6">
    <h2 class="text-2xl font-bold mb-6">Create Account</h2>

    <Enforma 
      :data="formData" 
      :rules="validationRules"
      :custom-messages="customMessages"
      :submit-handler="handleSubmit"
    >
      <EnformaField name="username" label="Username" required />
      <EnformaField name="email" label="Email Address" required />
      <EnformaField 
        name="password" 
        label="Password" 
        input-component="password" 
        required 
      />
      <EnformaField 
        name="password_confirmation" 
        label="Confirm Password" 
        input-component="password" 
        required 
      />
      <EnformaField name="age" label="Age" input-component="number" required />

      <template #actions>
        <EnformaSubmitButton>Create Account</EnformaSubmitButton>
      </template>
    </Enforma>
  </div>
</template>

<script setup>

const formData = {
  username: '',
  email: '',
  password: '',
  password_confirmation: '',
  age: null
}

const validationRules = {
  username: 'required|min:3|max:20',
  email: 'required|email',
  password: 'required|min:8',
  password_confirmation: 'required|same:@password',
  age: 'required|number|gte:18'
}

const customMessages = {
  'username.required': 'Please choose a username',
  'username.min': 'Username must be at least 3 characters',
  'email.email': 'Please enter a valid email address',
  'password.min': 'Password must be at least 8 characters',
  'password_confirmation.same': 'Passwords must match',
  'age.gte': 'You must be at least 18 years old'
}

const handleSubmit = async (data) => {
  try {
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1000))
    console.log('Account created:', data)
    return true
  } catch (error) {
    console.error('Failed to create account:', error)
    return false
  }
}
</script>

Step 4: Handling Nested Fields

Let's add address information to demonstrate how Enforma handles nested data structures:

<template>
  <div class="max-w-md mx-auto p-6">
    <h2 class="text-2xl font-bold mb-6">User Profile</h2>

    <Enforma :data="formData" :rules="validationRules">
      <!-- Personal Information -->
      <div class="mb-6">
        <h3 class="text-lg font-semibold mb-3">Personal Information</h3>
        <EnformaField name="personal.firstName" label="First Name" required />
        <EnformaField name="personal.lastName" label="Last Name" required />
        <EnformaField name="personal.email" label="Email" required />
      </div>

      <!-- Address Information -->
      <div class="mb-6">
        <h3 class="text-lg font-semibold mb-3">Address</h3>
        <EnformaField name="address.street" label="Street Address" required />
        <EnformaField name="address.city" label="City" required />
        <EnformaField name="address.zipCode" label="ZIP Code" required />
        <EnformaField name="address.country" label="Country" required />
      </div>

      <EnformaSubmitButton>Save Profile</EnformaSubmitButton>
    </Enforma>
  </div>
</template>

<script setup>
const formData = {
  personal: {
    firstName: '',
    lastName: '',
    email: ''
  },
  address: {
    street: '',
    city: '',
    zipCode: '',
    country: ''
  }
}

const validationRules = {
  'personal.firstName': 'required',
  'personal.lastName': 'required',
  'personal.email': 'required|email',
  'address.street': 'required',
  'address.city': 'required',
  'address.zipCode': 'required|min:5',
  'address.country': 'required'
}
</script>

What's Next?

Congratulations! You've successfully built your first dynamic Vue form with Enforma. You've learned how to:

✅ Install and set up Enforma in a Vue project

✅ Create forms with validation

✅ Handle nested data structures

Next Steps

Now that you've mastered the basics, consider exploring:

Repeatable fields for collections of fields
Schema-based forms for even more dynamic form generation
Headless components for complete UI control
Custom validation rules for complex business logic
UI framework integration with PrimeVue, Vuetify, or Quasar
Advanced features like conditional fields and transformers

Ready to dive deeper? Check out the Enforma documentation for advanced tutorials and comprehensive API references.

Complete Example Code

Here's the complete code for a comprehensive registration form combining all the concepts we've covered:

<template>
  <div class="max-w-2xl mx-auto p-6">
    <h1 class="text-3xl font-bold mb-8">Complete Registration</h1>

    <Enforma 
      :data="formData" 
      :rules="validationRules"
      :custom-messages="customMessages"
      :submit-handler="handleSubmit"
    >
      <!-- Personal Info -->
      <div class="mb-8">
        <h2 class="text-xl font-semibold mb-4">Personal Information</h2>
        <div class="grid grid-cols-2 gap-4">
          <EnformaField name="personal.firstName" label="First Name" required />
          <EnformaField name="personal.lastName" label="Last Name" required />
        </div>
        <EnformaField name="personal.email" label="Email" required />
        <EnformaField name="personal.password" label="Password" input-component="password" required />
        <EnformaField name="personal.confirmPassword" label="Confirm Password" input-component="password" required />
      </div>

      <!-- Address -->
      <div class="mb-8">
        <h2 class="text-xl font-semibold mb-4">Address</h2>
        <EnformaField name="address.street" label="Street Address" required />
        <div class="grid grid-cols-2 gap-4">
          <EnformaField name="address.city" label="City" required />
          <EnformaField name="address.zipCode" label="ZIP Code" required />
        </div>
      </div>
    </Enforma>
  </div>
</template>

<script setup>
import { Enforma, EnformaField, EnformaRepeatable, EnformaSubmitButton } from '@encolajs/enforma'


const formData = {
  personal: {
    firstName: '',
    lastName: '',
    email: '',
    password: '',
    confirmPassword: ''
  },
  address: {
    street: '',
    city: '',
    zipCode: ''
  },
  skills: [{ name: '', level: '' }]
}

const validationRules = {
  'personal.firstName': 'required',
  'personal.lastName': 'required', 
  'personal.email': 'required|email',
  'personal.password': 'required|min:8',
  'personal.confirmPassword': 'required|same:@personal.password',
  'address.street': 'required',
  'address.city': 'required',
  'address.zipCode': 'required|min:5',
  'skills.*.name': 'required',
  'skills.*.level': 'required'
}

const customMessages = {
  'personal.confirmPassword.same': 'Passwords must match',
  'personal.password.min': 'Password must be at least 8 characters',
  'address.zipCode.min': 'ZIP code must be at least 5 characters'
}

const handleSubmit = async (data) => {
  console.log('Registration data:', data)

  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 2000))

  alert('Account created successfully!')
  return true
}
</script>

Happy form building! 🚀

How to Build Reusable, Headless Form Components in Vue

Adrian Miu — Sat, 07 Jun 2025 05:24:00 +0000

Some people believe the future of form development lies in headless components—powerful, logic-driven components that handle all the complexity of form state management while giving you complete control over the visual presentation.

If you've ever felt constrained by the styling limitations of traditional form libraries, or struggled to maintain consistent forms across different UI frameworks, headless components are the solution you've been looking for.

In this comprehensive guide, we'll explore how to build flexible, reusable form components using Enforma's headless architecture that work with any design system or UI framework.

Introduction to Headless Components

What Are Headless Components?

Headless components are UI-agnostic components that provide all the functionality and state management without any predefined styling or markup. Think of them as the "brain" of your forms—they handle validation, state management, user interactions, and accessibility, while leaving the visual presentation entirely up to you.

<!-- Traditional approach: Locked into specific styling -->
<FormInput 
  label="Email" 
  type="email" 
  class="cant-change-internal-structure"
/>

<!-- Headless approach: Complete control -->
<HeadlessField name="email">
  <template #default="{ value, error, events, attrs }">
    <!-- Your custom markup and styling -->
    <div class="my-custom-field-wrapper">
      <label class="my-label-style">Email</label>
      <input 
        class="my-input-style"
        :value="value"
        v-bind="attrs"
        v-on="events"
      />
      <span v-if="error" class="my-error-style">{{ error }}</span>
    </div>
  </template>
</HeadlessField>

Benefits of Headless Forms

1. Complete UI Freedom
Build forms that perfectly match your design system without fighting against pre-built styles.

2. UI Framework Agnostic
Use the same form logic with PrimeVue, Vuetify, Quasar, or pure HTML—switch UI frameworks without rewriting form logic.

3. Reduced Bundle Size
No UI code included by default means smaller bundle sizes and faster load times.

4. Maximum Flexibility
Handle complex requirements like custom validation feedback, conditional fields, and unique user interactions.

5. Enhanced Maintainability
Separate form logic from presentation concerns, making both easier to test and maintain.

Enforma's Headless Architecture

Enforma provides three core headless components that form the foundation of any form system:

1. HeadlessForm - The Form Container

The main form component that manages overall form state, validation, and submission:

<HeadlessForm 
  :data="formData" 
  :rules="validationRules"
  :submit-handler="handleSubmit"
>
  <template #default="form">
    <!-- Access to complete form state -->
    <div>
      <span v-if="form.$isSubmitting.value">Submitting...</span>
      <!-- Your form fields here -->
    </div>
  </template>
</HeadlessForm>

2. HeadlessField - Individual Field Management

Manages individual field state, validation, and user interactions:

<HeadlessField name="email">
  <template #default="field">
    <!-- Complete field control -->
    <input
      :id="field.id"
      :value="field.value"
      :aria-invalid="!!field.error"
      v-bind="field.attrs"
      v-on="field.events"
    />
    <div v-if="field.error">{{ field.error }}</div>
  </template>
</HeadlessField>

3. HeadlessRepeatable - Dynamic Array Management

Handles arrays of fields with add, remove, and reorder functionality:

<HeadlessRepeatable name="skills">
  <template #default="{ value, add, remove, canAdd, canRemove }">
    <div v-for="(skill, index) in value" :key="index">
      <HeadlessField :name="`skills.${index}.name`">
        <!-- Field template -->
      </HeadlessField>
      <button @click="remove(index)" :disabled="!canRemove">
        Remove
      </button>
    </div>
    <button @click="add({ name: '' })" :disabled="!canAdd">
      Add Skill
    </button>
  </template>
</HeadlessRepeatable>

Building Your First Headless Form

Let's start with a complete example that demonstrates the power of headless components:

<template>
  <div class="max-w-md mx-auto p-6">
    <h2 class="text-2xl font-bold mb-6">Contact Form</h2>

    <HeadlessForm
      :data="formData"
      :rules="validationRules"
      :submit-handler="handleSubmit"
    >
      <template #default="form">
        <form @submit.prevent="form.submit()" class="space-y-4">
          <!-- Name Field -->
          <HeadlessField name="name">
            <template #default="{ value, error, events, attrs, id }">
              <div>
                <label 
                  :for="id"
                  class="block text-sm font-medium text-gray-700 mb-1"
                >
                  Full Name
                </label>
                <input
                  :id="id"
                  :value="value"
                  v-bind="attrs"
                  v-on="events"
                  class="w-full p-2 border rounded-md"
                  :class="{ 'border-red-500': error, 'border-gray-300': !error }"
                />
                <div v-if="error" class="text-red-500 text-sm mt-1">
                  {{ error }}
                </div>
              </div>
            </template>
          </HeadlessField>

          <!-- Email Field -->
          <HeadlessField name="email">
            <template #default="{ value, error, events, attrs, id }">
              <div>
                <label 
                  :for="id"
                  class="block text-sm font-medium text-gray-700 mb-1"
                >
                  Email Address
                </label>
                <input
                  :id="id"
                  :value="value"
                  type="email"
                  v-bind="attrs"
                  v-on="events"
                  class="w-full p-2 border rounded-md"
                  :class="{ 'border-red-500': error, 'border-gray-300': !error }"
                />
                <div v-if="error" class="text-red-500 text-sm mt-1">
                  {{ error }}
                </div>
              </div>
            </template>
          </HeadlessField>

          <!-- Message Field -->
          <HeadlessField name="message">
            <template #default="{ value, error, events, attrs, id }">
              <div>
                <label 
                  :for="id"
                  class="block text-sm font-medium text-gray-700 mb-1"
                >
                  Message
                </label>
                <textarea
                  :id="id"
                  :value="value"
                  rows="4"
                  v-bind="attrs"
                  v-on="events"
                  class="w-full p-2 border rounded-md"
                  :class="{ 'border-red-500': error, 'border-gray-300': !error }"
                ></textarea>
                <div v-if="error" class="text-red-500 text-sm mt-1">
                  {{ error }}
                </div>
              </div>
            </template>
          </HeadlessField>

          <!-- Submit Button -->
          <button
            type="submit"
            :disabled="form.$isSubmitting.value"
            class="w-full bg-blue-600 text-white py-2 px-4 rounded-md disabled:bg-gray-400"
          >
            {{ form.$isSubmitting.value ? 'Sending...' : 'Send Message' }}
          </button>
        </form>
      </template>
    </HeadlessForm>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { HeadlessForm, HeadlessField } from '@encolajs/enforma'

const formData = {
  name: '',
  email: '',
  message: ''
}

const validationRules = {
  name: 'required',
  email: 'required|email',
  message: 'required|min:10'
}

const handleSubmit = async (data) => {
  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 1000))
  console.log('Form submitted:', data)
  alert('Message sent successfully!')
  return true
}
</script>

Creating Reusable Components

Building a Base Field Component

The first step in creating reusable form components is building a base wrapper that reduces repetition:

<!-- components/AppFormField.vue -->
<template>
  <div class="form-field">
    <HeadlessField :name="name">
      <template #default="{ value, error, events, attrs, id }">
        <label 
          v-if="label"
          :for="id"
          class="field-label"
          :class="{ 'required': required }"
        >
          {{ label }}
          <span v-if="required" class="text-red-500">*</span>
        </label>

        <slot
          :value="value"
          :error="error"
          :events="events"
          :attrs="attrs"
          :id="id"
        />

        <div 
          v-if="error"
          :id="attrs['aria-errormessage']"
          class="field-error"
          role="alert"
        >
          {{ error }}
        </div>

        <div 
          v-if="help && !error"
          :id="attrs['aria-describedby']"
          class="field-help"
        >
          {{ help }}
        </div>
      </template>
    </HeadlessField>
  </div>
</template>

<script setup>
import { HeadlessField } from '@encolajs/enforma'

defineProps({
  name: {
    type: String,
    required: true
  },
  label: {
    type: String,
    default: null
  },
  help: {
    type: String,
    default: null
  },
  required: {
    type: Boolean,
    default: false
  }
})
</script>

<style scoped>
.form-field {
  margin-bottom: 1rem;
}

.field-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #374151;
}

.field-error {
  margin-top: 0.25rem;
  color: #dc2626;
  font-size: 0.875rem;
}

.field-help {
  margin-top: 0.25rem;
  color: #6b7280;
  font-size: 0.875rem;
}
</style>

Custom Input Components

Now build specific input types using your base component:

<!-- components/TextInput.vue -->
<template>
  <AppFormField 
    :name="name" 
    :label="label" 
    :help="help"
    :required="required"
  >
    <template #default="{ value, error, events, attrs, id }">
      <input
        :id="id"
        :type="type"
        :value="value"
        :placeholder="placeholder"
        v-bind="attrs"
        v-on="events"
        class="form-input"
        :class="{ 'input-error': error }"
      />
    </template>
  </AppFormField>
</template>

<script setup>
import AppFormField from './AppFormField.vue'

defineProps({
  name: { type: String, required: true },
  label: { type: String, default: null },
  type: { type: String, default: 'text' },
  placeholder: { type: String, default: null },
  help: { type: String, default: null },
  required: { type: Boolean, default: false }
})
</script>

<style scoped>
.form-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 1rem;
  transition: border-color 0.15s ease-in-out;
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.input-error {
  border-color: #dc2626;
}
</style>

Select Component

<!-- components/SelectInput.vue -->
<template>
  <AppFormField 
    :name="name" 
    :label="label" 
    :help="help"
    :required="required"
  >
    <template #default="{ value, error, events, attrs, id }">
      <select
        :id="id"
        :value="value"
        v-bind="attrs"
        v-on="events"
        class="form-select"
        :class="{ 'input-error': error }"
      >
        <option value="" v-if="placeholder">{{ placeholder }}</option>
        <option 
          v-for="option in options" 
          :key="option.value"
          :value="option.value"
          :disabled="option.disabled"
        >
          {{ option.label }}
        </option>
      </select>
    </template>
  </AppFormField>
</template>

<script setup>
import AppFormField from './AppFormField.vue'

defineProps({
  name: { type: String, required: true },
  label: { type: String, default: null },
  options: { type: Array, required: true },
  placeholder: { type: String, default: 'Select an option' },
  help: { type: String, default: null },
  required: { type: Boolean, default: false }
})
</script>

<style scoped>
.form-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 1rem;
  background-color: white;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}
</style>

Advanced Component Examples

Date Range Component

Here's a more complex component that handles two related date inputs:

<!-- components/DateRangeField.vue -->
<template>
  <div class="date-range-field">
    <label v-if="label" class="field-label">{{ label }}</label>

    <div class="date-inputs">
      <HeadlessField :name="`${name}.start`">
        <template #default="startField">
          <div class="date-input-wrapper">
            <label :for="startField.id" class="sr-only">Start Date</label>
            <input
              :id="startField.id"
              type="date"
              :value="startField.value"
              v-bind="startField.attrs"
              v-on="startField.events"
              :max="endValue"
              class="date-input"
              :class="{ 'input-error': startField.error }"
            />
            <span class="date-label">From</span>
          </div>
        </template>
      </HeadlessField>

      <div class="date-separator">—</div>

      <HeadlessField :name="`${name}.end`">
        <template #default="endField">
          <div class="date-input-wrapper">
            <label :for="endField.id" class="sr-only">End Date</label>
            <input
              :id="endField.id"
              type="date"
              :value="endField.value"
              v-bind="endField.attrs"
              v-on="endField.events"
              :min="startValue"
              class="date-input"
              :class="{ 'input-error': endField.error }"
            />
            <span class="date-label">To</span>
          </div>
        </template>
      </HeadlessField>
    </div>

    <div v-if="hasErrors" class="field-error">
      {{ firstError }}
    </div>
  </div>
</template>

<script setup>
import { computed, inject } from 'vue'
import { HeadlessField } from '@encolajs/enforma'

const props = defineProps({
  name: { type: String, required: true },
  label: { type: String, required: true }
})

// Access form context to get values for min/max constraints
const form = inject('form')

const startValue = computed(() => form.getFieldValue(`${props.name}.start`))
const endValue = computed(() => form.getFieldValue(`${props.name}.end`))

const startField = computed(() => form.getField(`${props.name}.start`))
const endField = computed(() => form.getField(`${props.name}.end`))

const hasErrors = computed(() => 
  startField.value?.error || endField.value?.error
)

const firstError = computed(() => 
  startField.value?.error || endField.value?.error
)
</script>

<style scoped>
.date-range-field {
  margin-bottom: 1rem;
}

.date-inputs {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.date-input-wrapper {
  flex: 1;
  position: relative;
}

.date-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 1rem;
}

.date-label {
  position: absolute;
  top: -0.5rem;
  left: 0.75rem;
  background: white;
  padding: 0 0.25rem;
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
}

.date-separator {
  color: #6b7280;
  font-weight: 500;
  margin: 0 0.5rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
</style>

Working with Dynamic Arrays

Skills Repeatable Component

<!-- components/SkillsField.vue -->
<template>
  <div class="skills-field">
    <h3 class="field-label">{{ label }}</h3>

    <HeadlessRepeatable 
      :name="name" 
      :min="minItems" 
      :max="maxItems"
    >
      <template #default="{ value, add, remove, canAdd, canRemove, moveUp, moveDown }">
        <div class="skills-list">
          <div 
            v-for="(skill, index) in value" 
            :key="index"
            class="skill-item"
          >
            <div class="skill-fields">
              <TextInput
                :name="`${name}.${index}.name`"
                label="Skill Name"
                placeholder="e.g., JavaScript, Design, Project Management"
                class="skill-name"
              />

              <SelectInput
                :name="`${name}.${index}.level`"
                label="Proficiency"
                :options="levelOptions"
                class="skill-level"
              />

              <TextInput
                :name="`${name}.${index}.years`"
                label="Years"
                type="number"
                placeholder="0"
                class="skill-years"
              />
            </div>

            <div class="skill-actions">
              <button
                type="button"
                @click="moveUp(index)"
                :disabled="index === 0"
                class="move-button"
                title="Move up"
              >
                ↑
              </button>

              <button
                type="button"
                @click="moveDown(index)"
                :disabled="index === value.length - 1"
                class="move-button"
                title="Move down"
              >
                ↓
              </button>

              <button
                type="button"
                @click="remove(index)"
                :disabled="!canRemove"
                class="remove-button"
                title="Remove skill"
              >
                ×
              </button>
            </div>
          </div>
        </div>

        <button
          type="button"
          @click="add({ name: '', level: '', years: 0 })"
          :disabled="!canAdd"
          class="add-button"
        >
          + Add Skill
        </button>

        <div v-if="!canAdd" class="max-items-notice">
          Maximum {{ maxItems }} skills allowed
        </div>
      </template>
    </HeadlessRepeatable>
  </div>
</template>

<script setup>
import { HeadlessRepeatable } from '@encolajs/enforma'
import TextInput from './TextInput.vue'
import SelectInput from './SelectInput.vue'

defineProps({
  name: { type: String, required: true },
  label: { type: String, default: 'Skills' },
  minItems: { type: Number, default: 0 },
  maxItems: { type: Number, default: 10 }
})

const levelOptions = [
  { value: 'beginner', label: 'Beginner' },
  { value: 'intermediate', label: 'Intermediate' },
  { value: 'advanced', label: 'Advanced' },
  { value: 'expert', label: 'Expert' }
]
</script>

<style scoped>
.skills-field {
  margin-bottom: 2rem;
}

.skills-list {
  space-y: 1rem;
}

.skill-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background-color: #f9fafb;
}

.skill-fields {
  flex: 1;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
  align-items: end;
}

.skill-actions {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.move-button,
.remove-button {
  width: 2rem;
  height: 2rem;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  cursor: pointer;
}

.move-button:hover,
.remove-button:hover {
  background-color: #f3f4f6;
}

.remove-button {
  color: #dc2626;
  border-color: #fca5a5;
}

.remove-button:hover {
  background-color: #fef2f2;
}

.add-button {
  padding: 0.75rem 1rem;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
}

.add-button:hover:not(:disabled) {
  background-color: #2563eb;
}

.add-button:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
}

.max-items-notice {
  color: #6b7280;
  font-size: 0.875rem;
  font-style: italic;
}
</style>

Accessibility and Best Practices

Automatic ARIA Support

Enforma's headless components automatically provide comprehensive accessibility features:

<template>
  <HeadlessField name="email">
    <template #default="{ attrs, events, id, error }">
      <!-- All ARIA attributes are automatically provided -->
      <input
        :id="id"
        v-bind="attrs"  <!-- Includes aria-invalid, aria-required, etc. -->
        v-on="events"
        type="email"
      />

      <!-- Error message properly linked via aria-errormessage -->
      <div 
        v-if="error"
        :id="attrs['aria-errormessage']"
        role="alert"
      >
        {{ error }}
      </div>
    </template>
  </HeadlessField>
</template>

Enhanced Accessibility Example

<template>
  <HeadlessField name="password">
    <template #default="{ value, error, events, attrs, id }">
      <div class="password-field">
        <label :for="id" class="field-label">
          Password
          <span class="required">*</span>
        </label>

        <div class="password-input-wrapper">
          <input
            :id="id"
            :type="showPassword ? 'text' : 'password'"
            :value="value"
            v-bind="attrs"
            v-on="events"
            class="password-input"
            :aria-describedby="`${id}-requirements`"
          />

          <button
            type="button"
            @click="showPassword = !showPassword"
            :aria-label="showPassword ? 'Hide password' : 'Show password'"
            class="password-toggle"
          >
            {{ showPassword ? '👁️' : '👁️‍🗨️' }}
          </button>
        </div>

        <!-- Password requirements -->
        <div 
          :id="`${id}-requirements`"
          class="password-requirements"
          :aria-live="value ? 'polite' : 'off'"
        >
          <div 
            class="requirement"
            :class="{ 'met': value.length >= 8 }"
          >
            ✓ At least 8 characters
          </div>
          <div 
            class="requirement"
            :class="{ 'met': /[A-Z]/.test(value) }"
          >
            ✓ One uppercase letter
          </div>
          <div 
            class="requirement"
            :class="{ 'met': /[0-9]/.test(value) }"
          >
            ✓ One number
          </div>
        </div>

        <div v-if="error" class="field-error" role="alert">
          {{ error }}
        </div>
      </div>
    </template>
  </HeadlessField>
</template>

<script setup>
import { ref } from 'vue'

const showPassword = ref(false)
</script>

Complete Example: Registration Form

Here's a comprehensive example that brings together all the concepts we've covered:

<template>
  <div class="max-w-2xl mx-auto p-6">
    <h1 class="text-3xl font-bold mb-8 text-center">Create Your Account</h1>

    <HeadlessForm
      :data="formData"
      :rules="validationRules"
      :custom-messages="customMessages"
      :submit-handler="handleSubmit"
    >
      <template #default="form">
        <div class="space-y-8">
          <!-- Personal Information -->
          <section>
            <h2 class="text-xl font-semibold mb-4">Personal Information</h2>
            <div class="grid grid-cols-2 gap-4">
              <TextInput
                name="personal.firstName"
                label="First Name"
                required
              />
              <TextInput
                name="personal.lastName"
                label="Last Name"
                required
              />
            </div>
            <TextInput
              name="personal.email"
              label="Email Address"
              type="email"
              required
            />
            <TextInput
              name="personal.password"
              label="Password"
              type="password"
              required
            />
          </section>

          <!-- Professional Information -->
          <section>
            <h2 class="text-xl font-semibold mb-4">Professional Background</h2>
            <TextInput
              name="professional.jobTitle"
              label="Current Job Title"
              placeholder="e.g., Frontend Developer"
            />
            <SelectInput
              name="professional.experience"
              label="Years of Experience"
              :options="experienceOptions"
              required
            />
            <SkillsField
              name="professional.skills"
              label="Technical Skills"
              :min-items="1"
              :max-items="10"
            />
          </section>

          <!-- Contact Preferences -->
          <section>
            <h2 class="text-xl font-semibold mb-4">Contact Preferences</h2>
            <HeadlessField name="preferences.newsletter">
              <template #default="{ value, events, id }">
                <div class="flex items-center">
                  <input
                    :id="id"
                    type="checkbox"
                    :checked="value"
                    @change="events.input($event.target.checked)"
                    class="rounded border-gray-300"
                  />
                  <label :for="id" class="ml-2">
                    Subscribe to our newsletter
                  </label>
                </div>
              </template>
            </HeadlessField>
          </section>

          <!-- Form Actions -->
          <div class="flex gap-4 pt-4">
            <button
              type="button"
              @click="form.reset()"
              class="flex-1 py-2 px-4 border border-gray-300 rounded-md hover:bg-gray-50"
            >
              Reset Form
            </button>
            <button
              type="submit"
              :disabled="form.$isSubmitting.value"
              class="flex-1 py-2 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400"
            >
              {{ form.$isSubmitting.value ? 'Creating Account...' : 'Create Account' }}
            </button>
          </div>

          <!-- Form State Display (for demo) -->
          <div v-if="showDebug" class="mt-8 p-4 bg-gray-100 rounded-md">
            <h3 class="font-semibold mb-2">Form State (Debug)</h3>
            <div class="text-sm space-y-1">
              <div>Is Dirty: {{ form.$isDirty.value }}</div>
              <div>Is Valid: {{ form.$isValid.value }}</div>
              <div>Is Submitting: {{ form.$isSubmitting.value }}</div>
            </div>
          </div>
        </div>
      </template>
    </HeadlessForm>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { HeadlessForm, HeadlessField } from '@encolajs/enforma'
import TextInput from './components/TextInput.vue'
import SelectInput from './components/SelectInput.vue'
import SkillsField from './components/SkillsField.vue'

const showDebug = ref(false)

const formData = {
  personal: {
    firstName: '',
    lastName: '',
    email: '',
    password: ''
  },
  professional: {
    jobTitle: '',
    experience: '',
    skills: [{ name: '', level: '', years: 0 }]
  },
  preferences: {
    newsletter: false
  }
}

const validationRules = {
  'personal.firstName': 'required',
  'personal.lastName': 'required',
  'personal.email': 'required|email',
  'personal.password': 'required|min:8',
  'professional.experience': 'required',
  'professional.skills.*.name': 'required',
  'professional.skills.*.level': 'required'
}

const customMessages = {
  'personal.password.min': 'Password must be at least 8 characters long',
  'professional.skills.*.name.required': 'Skill name is required',
  'professional.skills.*.level.required': 'Please select a proficiency level'
}

const experienceOptions = [
  { value: '0-1', label: '0-1 years' },
  { value: '2-3', label: '2-3 years' },
  { value: '4-6', label: '4-6 years' },
  { value: '7-10', label: '7-10 years' },
  { value: '10+', label: '10+ years' }
]

const handleSubmit = async (data) => {
  console.log('Submitting registration:', data)

  // Simulate API call
  await new Promise(resolve => setTimeout(resolve, 2000))

  alert('Account created successfully!')
  return true
}
</script>

Final Thoughts: Reusability and Maintainability

Benefits You've Gained

By using Enforma's headless approach, you've achieved:

Complete UI Control: Build forms that perfectly match your design system
Framework Independence: Switch UI libraries without rewriting form logic
Enhanced Accessibility: Automatic ARIA support with full customization
Maximum Reusability: Components work across projects and teams
Better Testing: Separate logic from presentation for easier unit testing
Improved Performance: Only include the UI code you actually need

Best Practices Summary

Start with base components that handle common patterns
Use composition to build complex fields from simple parts
Leverage Enforma's automatic accessibility features
Test form logic separately from UI presentation
Create a component library for your organization
Document your custom components with clear examples

The headless approach transforms form development from a tedious, repetitive task into a flexible, creative process. Whether you're building simple contact forms or complex multi-step wizards, Enforma's headless components provide the foundation for beautiful, accessible, and maintainable forms.

Ready to get started? Install Enforma and begin building your first headless form component today.

Try Enforma Now →

Why You Need to Use a Form Library for Complex VueJS Apps

Adrian Miu — Tue, 03 Jun 2025 16:50:19 +0000

Forms are the backbone of modern web applications. Whether you're building an admin dashboard, an e-commerce checkout flow, or a complex data entry system, forms determine how users interact with your application. Yet, despite their importance, forms are often one of the most challenging aspects of Vue.js development.

If you've ever found yourself wrestling with nested form data, struggling to manage field validation states, or writing repetitive code for dynamic forms, you're not alone. These pain points are exactly why Enforma exists—to transform complex form development from a burden into a breeze.

The Real Pain Points of Vue Form Development

1. Nested Form Data Management

Traditional Vue form handling becomes unwieldy when dealing with complex, nested data structures:

// The nightmare of deeply nested v-model bindings
<input v-model="form.user.profile.personalInfo.firstName" />
<input v-model="form.user.profile.personalInfo.lastName" />
<input v-model="form.user.addresses[0].street" />
<input v-model="form.user.addresses[0].city" />

As your forms grow, managing this nested reactivity becomes increasingly complex, leading to performance issues and maintenance headaches.

2. Dynamic Field Requirements

Modern applications often require forms that change based on user input or server data. Implementing conditional fields, repeatable sections, or dynamic validation rules quickly becomes a web of reactive watchers and computed properties:

// What you end up writing
const showShippingAddress = computed(() => form.requiresShipping && form.total > 0)
const addressFields = computed(() => user.addresses.map((addr, index) => ({
  // Complex mapping logic here...
})))

3. Form State Chaos

Tracking form state—dirty fields, touched inputs, validation errors, loading states—across hundreds of fields becomes a developer nightmare. You end up with scattered state management and inconsistent user experiences.

This seems simple but many UI library have given up implementing a proper state management. The best user experience for validating a field is the following:

If the user enters/focuses on a field but it doesn't change its value the field should be considered "clean" and validation should not be triggered.
Only if the user changes the original value, the field becomes "dirty" and the validation should be triggered. And that should only happen on blur.
A dirty field should trigger validation on each keystroke.

Vuetify, for example, would trigger validation on blur no matter how the user interacted during with the field. Because it's easier this way (or I don't know how to configure it as I have no experience with it).

4. Validation Complexity

Cross-field validation, async validation, and nested validation rules require custom solutions that are often fragile and hard to test:

// The validation spaghetti
watch([() => form.startDate, () => form.endDate], ([start, end]) => {
  if (start && end && start > end) {
    errors.endDate = 'End date must be after start date'
  }
  // And this is just one rule...
})

What Developers Usually End Up Doing

Faced with these challenges, developers typically resort to:

Copying and pasting form logic between components, or at best using composables or mixins.
Building custom abstractions that work for one project but aren't reusable
Using validation libraries and implement their own UI interactions
Writing hundreds of lines of boilerplate for form state management
Creating fragile validation systems that are hard to maintain

These workarounds lead to technical debt, bugs, and frustrated development teams.

The Enforma Philosophy: Flexible, UI-Agnostic, Headless

Enforma was built with a different philosophy: separation of concerns. Instead of forcing you into specific UI components or patterns, Enforma provides the logic layer while giving you complete freedom over the presentation.

Headless by Design

Enforma's started with headless architecture which means you get all the powerful form logic without being locked into specific UI components:

<HeadlessField :name="street">
  <template #default="{ model, value, attrs, error, events, id }">
    <label
      :id="attrs['aria-labelledby']"
      :for="id"
      class="block" >
      Street
    </label>
    <input
      :id="id"
      :value="value"
      class="w-full"
      v-bind="attrs"
      v-on="events"
    />
    <div v-if="error"
         :id="attrs['aria-errormessage']"
         class="text-red-500">
      {{ error }}
    </div>
  </template>
</HeadlessField>

This is just the foundation of the library on top of which we built a set of core components that reduce verbosity and that you can customize to your desire.

Because such customization is trivial Enforma comes with presets for PrimeVue, Vuetify and Quasar. And you can easily bring your own UI components

Multiple Rendering Approaches

Enforma uniquely offers four different ways to build forms, letting you choose the right approach for each situation:

Field-based: Explicit control for complex custom forms
Schema-based: JSON-driven forms for dynamic UIs
Headless: Complete UI freedom with just state management
Mixed: Combine all approaches for ultimate flexibility

How Enforma Solves These Complex Problems

1. Effortless Nested Data Handling

// Instead of complex v-model bindings
const schema = {
   'user.profile.firstName': { 
      type: 'text', 
      required: true 
    },
  'user.addresses': {
      type: 'repeatable', 
      subfields: [
        { name: 'street', type: 'text' },
        { name: 'city', type: 'text' }
      ]
    }
}

Enforma automatically handles the nested reactivity, validation, and state management.

2. Comprehensive Validation System

// Cross-field validation that just works
const rules = {
  'end_date': 'required|date_after:@start_date',
  'confirm_password': 'required|same:@password',
  'total': 'gte:@subtotal'
}

Enforma's validation system includes 30+ built-in rules, async validation support, and clean syntax for cross-field dependencies.

3. Performance at Scale

Built on Vue 3's reactivity system, Enforma is optimized for forms with hundreds of fields without sacrificing performance.

Real-World Example: Before and After

Before Enforma (traditional approach):

<template>
  <form @submit="handleSubmit">
    <div v-for="(address, index) in form.addresses" :key="index">
      <input 
        v-model="address.street" 
        :class="{ error: errors[`addresses.${index}.street`] }"
      />
      <span v-if="errors[`addresses.${index}.street`]">
        {{ errors[`addresses.${index}.street`] }}
      </span>
      <button @click="removeAddress(index)">Remove</button>
    </div>
    <button @click="addAddress">Add Address</button>
  </form>
</template>

<script>
// 100+ lines of form state management...
</script>

After Enforma (schema approach):

<template>
  <EnformaSchema 
    :schema="addressSchema" 
    :data="form"
    :submitHandler="handleSubmit"
  />
</template>

<script setup>
  const addressSchema = {
    'addresses': {
      type: 'repeatable',
      subfields: {
        street: { type: 'text', required: true },
      }
    }
  }
</script>

Ready to Transform Your Vue Forms?

Enforma eliminates the complexity of modern form development while giving you the flexibility to build exactly what your application needs. Whether you're building a simple contact form or a complex multi-step wizard, Enforma scales with your requirements.

Get started today:

npm install @encolajs/enforma

Try Enforma today. Your future self (and your team) will thank you.

Try Enforma Now →