form builder vue

If you want to build a form builder in Vue, there are a few common approaches depending on how custom you need it.

Option 1: Use an existing library

Good if you want to move fast.

• FormKit — very Vue-friendly, dynamic forms, validation, schema-based
• Vue Formulate — easier form building, but less active than FormKit
• VeeValidate — great for validation, not a full visual form builder
• JSON Schema-based forms — useful if your forms are generated from config

Option 2: Build your own form builder

Typical structure:

Features

• drag-and-drop field list
• field properties panel
• live preview
• save/load form schema as JSON
• validation rules
• conditional logic

Example form schema

const formSchema = [
  {
    type: 'text',
    label: 'First Name',
    model: 'firstName',
    required: true
  },
  {
    type: 'email',
    label: 'Email',
    model: 'email',
    required: true
  }
]

Simple Vue renderer

<template>
  <form @submit.prevent="submitForm">
    <div v-for="field in schema" :key="field.model">
      <label>{{ field.label }}</label>

      <input
        v-if="field.type === 'text' || field.type === 'email'"
        :type="field.type"
        v-model="formData[field.model]"
      />
    </div>

    <button type="submit">Submit</button>
  </form>
</template>

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

const schema = [
  { type: 'text', label: 'First Name', model: 'firstName' },
  { type: 'email', label: 'Email', model: 'email' }
]

const formData = reactive({
  firstName: '',
  email: ''
})

function submitForm() {
  console.log(formData)
}
</script>

Option 3: Drag-and-drop builder UI

If you want a real form builder app, you’d usually build:

• Left sidebar: field types
• Center canvas: form layout
• Right sidebar: field settings
• Top bar: save / preview / undo

Useful packages:

• vue-draggable-plus
• SortableJS
• nanoid for IDs

---

Recommended stack for a Vue form builder

• Vue 3
• Pinia for state management
• vue-draggable-plus for drag-and-drop
• VeeValidate for validation
• Zod or Yup for schema validation

---

If you want, I can give you:

1. a basic Vue 3 form builder starter project
2. a drag-and-drop form builder example
3. a schema-driven dynamic form component