@autoform/vue

Automatically render forms from your Zod schema in Vue 3 — the official Vue integration for AutoForm.

Define your schema once. Get a complete, validated form instantly.

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

const schema = new ZodProvider(
  z.object({
    name: z.string().min(2).describe('Full Name'),
    email: z.string().email(),
    age: z.number().min(18).max(120),
    role: z.enum(['developer', 'designer', 'manager']),
    bio: z.string().optional().describe('Tell us about yourself'),
    newsletter: z.boolean().default(false),
  })
)

function onSubmit(data) {
  console.log('Validated data:', data)
}
</script>

<template>
  <AutoForm :schema="schema" @submit="onSubmit" />
</template>

That's it. No manual field binding. No v-model wiring. No error handling boilerplate.

Features

• Zero boilerplate — Schema in, form out
• Zod & Yup support — via @autoform/zod and @autoform/yup
• Full validation — Automatic error messages from your schema
• TypeScript — Full type safety with inferred types
• Customizable — Override any field component or wrapper
• Tiny — ~2.8 kB gzipped, depends only on @autoform/core
• Vue 3 — Composition API, reactive state, defineExpose for form control

Installation

pnpm add @autoform/vue @autoform/zod zod
# or
npm install @autoform/vue @autoform/zod zod

Field Type Inference

AutoForm automatically maps Zod types to form fields:

Zod Type	Rendered As
z.string()	Text input
z.number()	Number input
z.boolean()	Checkbox
z.date()	Date picker
z.enum([...])	Select dropdown
z.object({...})	Nested fieldset

Customizing Fields

Override the default field type with fieldConfig:

import { fieldConfig } from '@autoform/zod'

const schema = z.object({
  bio: z.string().superRefine(fieldConfig({
    fieldType: 'textarea',
    inputProps: { placeholder: 'Write something...' },
    label: 'Biography',
    description: 'Max 500 characters',
  })),
})

Custom Field Components

Replace built-in fields with your own:

<template>
  <AutoForm
    :schema="schema"
    :form-components="{
      string: MyCustomInput,
      select: MyCustomSelect,
    }"
    @submit="onSubmit"
  />
</template>

Your custom component receives these props:

interface AutoFormFieldProps {
  field: ParsedField      // Schema field info
  modelValue: any         // Current value
  error?: string          // Validation error
  inputProps?: Record<string, any>  // Extra HTML attributes
}

Accessing Form State

Use template ref to access form internals:

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

const formRef = ref()

function resetForm() {
  formRef.value?.reset()
}
</script>

<template>
  <AutoForm ref="formRef" :schema="schema" @submit="onSubmit" />
  <button @click="resetForm">Reset</button>
</template>

Exposed: values, errors, isSubmitting, reset()

Using the Composable Directly

For full control, use useAutoForm:

<script setup>
import { useAutoForm } from '@autoform/vue'

const { values, errors, fields, handleSubmit, setFieldValue } = useAutoForm(provider)
</script>

Props

Prop	Type	Default	Description
schema	SchemaProvider	required	Schema provider (ZodProvider, etc.)
withSubmit	boolean	true	Show submit button
submitText	string	'Submit'	Submit button text
formComponents	Record<string, Component>	—	Custom field components
uiComponents	AutoFormUIComponents	—	Custom wrapper components
formProps	Record<string, any>	—	Extra form HTML attributes

Events

Event	Payload	Description
@submit	Validated data object	Emitted on successful validation and submit

Part of the AutoForm Ecosystem

This package is the Vue 3 integration for AutoForm (3,400+ stars). It works alongside:

• @autoform/core — Schema-agnostic core
• @autoform/zod — Zod schema adapter
• @autoform/yup — Yup schema adapter
• @autoform/react — React integration
• @autoform/vue — Vue 3 integration (this package)

License

MIT — Made with ❤️ by Mustafa Vatandas