# vue-form-builder-core

> Headless and schema-driven form builder engine for Vue 3.

Latest version **1.1.3** (published 2026-09-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-form-builder-core
pnpm add vue-form-builder-core
yarn add vue-form-builder-core
bun add vue-form-builder-core
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2026-09-22 |
| First published | 2026-09-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 110.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Ali Esmaeeli |
| Maintainers | krasus |
| Keywords | vue, vue3, form, form-builder, schema-form, dynamic-forms, headless-form |

## Links

- npm: https://www.npmjs.com/package/vue-form-builder-core
- Repository: https://github.com/kerasus/vue-form-builder-core
- Homepage: https://github.com/kerasus/vue-form-builder-core#readme
- Issues: https://github.com/kerasus/vue-form-builder-core/issues
- npm.io page: https://npm.io/package/vue-form-builder-core

## Dependencies (1)

- [shvl](https://npm.io/package/shvl.md) ^3.0.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.3 (latest) — 2026-09-22
- 1.1.2 — 2026-09-22
- 1.1.1 — 2026-09-22
- 1.1.0 — 2026-09-22
- 1.0.8 — 2026-09-22
- 1.0.7 — 2026-09-21
- 1.0.6 — 2026-09-21
- 1.0.5 — 2026-09-21
- 1.0.4 — 2026-09-21
- 1.0.3 — 2026-09-09
- 1.0.2 — 2026-09-09
- 1.0.1 — 2026-09-09
- 1.0.0 — 2026-09-09
- 0.0.7 — 2026-09-09
- 0.0.6 — 2026-09-09
- … 5 more at https://npm.io/package/vue-form-builder-core/versions

## README

# vue-form-builder-core

Headless, schema-driven form builder engine for Vue 3. Build dynamic forms from a JSON-like schema; the core focuses on state, validation, and nested structures while remaining headless so you can style the UI however you like.

## Installation

Prefer pnpm for development (this repository uses pnpm):

```bash
pnpm install
```

To add the package to a project (when published):

```bash
pnpm add vue-form-builder-core
# or
npm install vue-form-builder-core
```

## Quick Start

Use the `FormBuilder` component in your Vue 3 app with v-model or the provided composable API.

Basic example (component):

```vue
<template>
  <FormBuilder v-model:value="inputs" />
</template>

<script setup>
import { ref } from 'vue'
import { FormBuilder } from 'vue-form-builder-core'

const inputs = ref([
  { type: 'text', name: 'firstName', label: 'First Name' },
  { type: 'text', name: 'lastName', label: 'Last Name' }
])
</script>
```

Composable example:

```js
import { useFormBuilder } from 'vue-form-builder-core'

const { inputData, getFormData, setFormData } = useFormBuilder({
  initialInputs: [{ type: 'text', name: 'email', label: 'Email' }]
})

// read values with getFormData()
```

## Demo (from dev/App.vue)

The included demo at `dev/App.vue` shows a practical usage of the `FormBuilder` with two-way binding for both `inputs` and `formData`, nested forms, and programmatic methods via a component ref.

```vue
<template>
  <FormBuilder
    ref="formRef"
    v-model:form-data="formData"
    v-model:inputs="inputs"
    form-data-mode="flat"
    @change="handleChange"
  />
</template>

<script setup>
import { ref } from 'vue'
import FormBuilder from './src/FormBuilder.vue'

const formRef = ref(null)

const inputs = ref([
  { name: 'fullname', type: 'text', label: 'Full Name' },
  { name: 'email', type: 'email', label: 'Email' },
  { name: 'gender', type: 'select', label: 'Gender', options: [{label:'Male',value:'male'},{label:'Female',value:'female'}] },
  { name: 'agree', type: 'checkbox', label: 'I agree' },
  { name: 'address', type: 'formBuilder', label: 'Address', inputs: [
    { name: 'street', type: 'text', label: 'Street' },
    { name: 'city', type: 'text', label: 'City' }
  ] }
])

const formData = ref({ fullname: 'Alice', email: '', gender: 'female', agree: false, address: { street: '', city: '' } })

function handleChange(payload) { console.log('Form changed:', payload) }

// Methods available via `formRef.value` in the demo:
// - getFormData()
// - setFormData(data)
// - clearValues()
</script>
```

## Development (local demo)

This repository includes a small demo app in the `dev/` folder that runs with Vite.

Run locally:

```bash
pnpm install
pnpm dev
```

Build package (type checking + bundle):

```bash
pnpm run build
```

Preview the production build:

```bash
pnpm run preview
```

## Built-in Input Types

- text, number, password, email, date, time
- textarea
- select
- checkbox
- radio
- file
- hidden
- nested `formBuilder` type for recursive forms

## Features

- Schema-driven API for dynamic forms
- Headless core (styling entirely up to you)
- `useFormBuilder` composable for programmatic control
- Nested/recursive forms support
- Simple grid/column helpers
- TypeScript typings included

## Contributing

Contributions are welcome. Suggested workflow:

1. Fork and branch.
2. Run `pnpm install` and `pnpm dev` to test the demo.
3. Open a PR with a clear description.

## License

MIT

---
_Source: https://npm.io/package/vue-form-builder-core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._