@einhasad-vue/form-builder-vue

Vue 3 Form Builder

Drag-and-drop form builder and renderer for Vue 3 — TypeScript-first, zero jQuery, zero runtime dependencies.

Size

Measured against @einhasad-vue/form-builder-vue@0.1.0 on a clean install. vue is a peer dependency — the numbers below are the delta you pay on top of an existing Vue app; Vue's own runtime (~11 KB gzip) is not counted because your app already has it. CSS is required for the builder's drag preview; the renderer works without it.

What actually reaches the browser

Measured by bundling a consumer with esbuild --bundle --minify and vue marked external.

What npm puts on disk

Zero runtime dependencies — nothing transitive gets pulled in. Library is ESM, so modern bundlers tree-shake unused exports.

Features

• Drag-and-drop form builder with live preview
• 16 built-in field types (text, select, checkbox-group, radio-group, date, file, header, paragraph, etc.)
• Form renderer for displaying saved forms and collecting user input
• v-model support on both builder and renderer
• Fully typed with TypeScript
• Customizable via options (disable fields, custom attrs, i18n, action buttons)
• Scoped styles, no global CSS pollution
• Zero jQuery dependency

Installation

npm install @einhasad-vue/form-builder-vue

Requires Vue 3.5+ as a peer dependency.

Usage

Form Builder

<script setup lang="ts">
import { ref } from 'vue'
import { FormBuilder } from '@einhasad-vue/form-builder-vue'
import type { FormDataField } from '@einhasad-vue/form-builder-vue'

const formData = ref<FormDataField[]>([])
</script>

<template>
  <FormBuilder v-model="formData" />
</template>

Form Renderer

<script setup lang="ts">
import { ref } from 'vue'
import { FormRenderer } from '@einhasad-vue/form-builder-vue'
import type { FormDataField, UserDataMap } from '@einhasad-vue/form-builder-vue'

const formData = ref<FormDataField[]>([/* saved form data */])
const userData = ref<UserDataMap>({})
</script>

<template>
  <FormRenderer
    :form-data="formData"
    v-model="userData"
  />
</template>

API

FormBuilder Props

FormBuilder Events

FormBuilder Exposed Methods

FormRenderer Props

BuilderOptions

Field Types

text, number, date, select, checkbox-group, radio-group, textarea, file, autocomplete, button, header, paragraph, hidden, checkbox

Composables

All internal composables are exported for advanced usage:

import {
  useFormBuilder,
  useFormRenderer,
  useFieldRegistry,
  useDragDrop,
  useI18n,
} from '@einhasad-vue/form-builder-vue'

Provide / inject helpers

The library shares configuration, state, field registry, and i18n with descendant components through provide/inject. The injection keys are module-private — consumers interact with them through paired helper functions. Use these when mounting child pieces (e.g. BuilderStage) inside custom wrappers, or when reading context from your own composables:

import {
  provideBuilderOptions, useBuilderOptions,
  provideBuilderState,   useBuilderState,
  provideBuilderRegistry, useBuilderRegistry,
  provideBuilderI18n,    useBuilderI18n,
  type BuilderRegistryContext,
  type BuilderI18nContext,
} from '@einhasad-vue/form-builder-vue'

Each use*() returns undefined if nothing was provided upstream, so consumers can fall back cleanly.

Theming

Scoped styles read their colors from CSS custom properties. Redefine them on .form-builder (or any ancestor) to retheme without overriding individual selectors. Key variables:

Development

npm run build          # Build library
npm run test           # Run tests
npm run test:coverage  # Run tests with 100% coverage thresholds
npm run typecheck      # TypeScript type checking
npm run lint           # ESLint

License

MIT