The <AutoForm/> component is the core of Nuxt Auto Form. It automatically generates a form based on your Zod schema, so you don’t have to manually define inputs, validations, or state.

Customization

You can customize the form using the following options:

• Config - modify default components and module settings
• Fields - customize the rendering, title, and description of individual fields
• SubmitButton - customize the submit button appearance and behavior
• Slots - create fully custom input fields for maximum flexibility

Properties

schema (required)

The Zod schema that defines your form structure and validation rules. You can include metadata for fields such as labels, descriptions, and placeholders.

See Customization / Fields documentation for more information.

import * as z from 'zod'

const schema = z.object({
  name: z.string().meta({ title: 'Not name' }),
})

config

Use this prop to override default Nuxt Auto Form configuration. See more here.

<!-- Change the submit button label -->
<AutoForm
  :schema="schema"
  :config="{ submit: { props: { label: 'Confirm' } } }"
/>

initialState

Set default values for your form fields, which is especially useful for edit forms or prefilled forms.

Unlike UForm, where you always had to manually define state, <AutoForm/> automatically manages form state for you. initialState lets you override defaults when needed.

It has type Partial<z.InferInput<T>>, where T is your Zod schema type.

<script setup lang="ts">
const state = {
  age: getAge(data.value.birth_year),
  ...data.value,
}
</script>

<template>
  <AutoForm :schema="schema" :initial-state="state" />
</template>

Emits

@submit

Emitted when the form is submitted and all validations pass.

The event payload contains the form data with type z.infer<typeof schema>.

<AutoForm
  :schema="schema"
  @submit="(data) => console.log(data)"
/>

Exposed methods

<AutoForm/> exposes the submit() method for programmatic form submission:

<script setup lang="ts">
const formRef = useTemplateRef('form')
</script>

<template>
  <UButton @click="formRef?.submit()" />
  <AutoForm ref="formRef" :schema="schema" />
</template>

Related components

• AutoFormPrimitive - Thin wrapper around UForm with auto-generated fields
• AutoFormModal - Modal with integrated form for best DX

Slots

Use slots to override individual fields or inject custom content inside the form. See Slots for details

<template>
  <AutoForm :schema="schema">
    <template #text-hint>
      This is a hint for the text field.
    </template>
  </AutoForm>
</template>

Examples

Complex real world example