useAutoForm

A composable for creating typed Zod schemas and managing AutoForm controls.

Usage

Use the auto-imported useAutoForm composable to create typed Zod schemas and provide validation rules and control configuration for the AutoForm component.

<script setup lang="ts">
const { afz } = useAutoForm()

const schema = afz.object({
  username: afz.string('Username is required'),
  email: afz.email('Please enter a valid email address'),
  age: afz.number().min(18, 'Must be at least 18 years old')
})

const formData = ref()
</script>

<template>
  <MAutoForm v-model="formData" :schema="schema" />
</template>

useAutoForm returns the enhanced Zod factory object afz, which supports attaching AutoForm metadata to schemas.
Metadata is automatically persisted through Zod's chained calls (e.g. .optional(), .nullable(), .default(), etc.).

Schemas created with the afz factory intercept Zod's clone methods to ensure metadata is not lost during chained calls.

Custom Control Registration

When using custom controls, define them with the defineControl helper:

const { afz, defineControl } = useAutoForm({
  myInput: defineControl({
    component: MyCustomInput,
    controlProps: { class: 'w-full' }
  })
})

// Now usable in a schema
const schema = afz.string({
  type: 'myInput',
  controlProps: { variant: 'outline' }
})