feat: add Vue 3 integration (@autoform/vue)

[mvtandas]

Summary

Adds the Vue 3 integration for AutoForm as @autoform/vue, following the same architecture as @autoform/react.

Closes #199

What's included

Components

Component	Description
AutoForm	Main form component — parses schema, manages state, validates, submits
AutoFormField	Renders individual fields based on schema type
ObjectField	Handles nested object schemas recursively
ArrayField	Handles array schemas with add/remove support

Composables

Export	Description
useAutoForm()	Inject context from nearest AutoForm parent
provideAutoForm()	Provide context (used internally by AutoForm)

Utilities

Export	Description
buildZodFieldConfig()	Type-safe Zod field config builder for Vue
buildYupFieldConfig()	Type-safe Yup field config builder for Vue
getPathInObject()	Read nested value by path
setPathInObject()	Set nested value by path

Architecture

Follows the exact same pattern as @autoform/react:

@autoform/core          → Schema parsing, validation (shared)
@autoform/zod           → Zod adapter (shared)
@autoform/vue (NEW)     → Vue 3 component layer
@autoform/shadcn-vue    → UI components (future)

Key differences from React version:

• Uses Vue 3 reactive() instead of react-hook-form for form state
• Uses provide/inject instead of React Context
• Uses h() render functions (pure TS, no SFC/JSX needed)
• Uses v-model compatible inputProps for field binding

Usage

<script setup>
import { AutoForm } from '@autoform/vue'
import { ZodProvider } from '@autoform/zod'
import { z } from 'zod'

const schema = new ZodProvider(
  z.object({
    name: z.string().min(2),
    email: z.string().email(),
    role: z.enum(['developer', 'designer']),
  })
)
</script>

<template>
  <AutoForm
    :schema="schema"
    :ui-components="uiComponents"
    :form-components="fieldComponents"
    with-submit
    @submit="console.log"
  />
</template>

Build

CJS + ESM builds pass successfully via tsup. TypeScript types are fully exported.

Next steps (future PRs)

• @autoform/shadcn-vue — Styled components using shadcn-vue
• Add to documentation site
• Add examples

[changeset-bot]

🦋 Changeset detected

Latest commit: 817afc8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@autoform/core	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

@mvtandas is attempting to deploy a commit to the vantezzen Team on Vercel.

A member of the Team first needs to authorize it.

[mvtandas]

Live Demo 🚀

I've deployed a live demo showcasing the Vue 3 integration:

👉 https://mvtandas.github.io/autoform-vue-demo/

It includes three examples:

• Basic Form — string, number, enum, boolean fields
• Advanced Form — dates, passwords, salary fields
• Nested Objects — grouped fieldsets with sub-schemas

The demo uses custom UI and field components built with plain Vue 3 h() render functions — no external UI library needed. This shows how @autoform/vue can work with any design system.

Source: https://github.com/mvtandas/autoform-vue-demo

[mvtandas]

Updated the PR with fixes:

• Prevent duplicate labels — when z.string().describe('Name') is used, the description no longer duplicates the label
• Pass description to FieldWrapper — allows UI implementations to show field descriptions separately

The live demo has been updated and is working well: https://mvtandas.github.io/autoform-vue-demo/

Would love to get your feedback on this @vantezzen — happy to make any adjustments!

[vantezzen]

Thank you, looks very nice. I'm not too deep into Vue specifics - if you want you can add docs for the Vue integration into the docs folder (https://github.com/vantezzen/autoform/tree/main/apps/docs/content/docs) so they are added to the doc page

[mvtandas]

@vantezzen Done! I've added the complete Vue documentation:

• Getting Started — Installation, schema setup, UI/field components, form state access
• Customization — Custom field components, UI components, field wrappers, field type overrides
• API Reference — All props, events, exposed methods, useAutoForm composable, utility functions, TypeScript types

Also added Vue to the installation section on the main docs index page.

Let me know if you'd like any changes!

[mvtandas]

Added the missing changeset. Everything should be ready to merge now!