<AutoFormPrimitive/>

The <AutoFormPrimitive/> component wraps @nuxt/ui's UForm with automatic field generation from a Zod schema. It forwards all props, events, and methods to the underlying UForm, so refer to the UForm documentation for the complete API.

Additional Props

In addition to all UForm props, <AutoFormPrimitive/> accepts:

schema (required)

The Zod schema that defines your form structure and validation rules. Fields are auto-generated based on this schema.

state (required)

A reactive object that holds the form state. Unlike <AutoForm/>, you must manage this yourself.

config

Override default Nuxt Auto Form configuration. See Config.

Auto-generated Fields

Unlike UForm, <AutoFormPrimitive/> automatically generates form fields based on your Zod schema:

<script setup lang="ts">
import * as z from 'zod'

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
})

const state = reactive({ email: '', password: '' })
</script>

<template>
  <AutoFormPrimitive :schema="schema" :state="state" @submit="onSubmit">
    <template #submit>
      <UButton type="submit">
        Submit
      </UButton>
    </template>
  </AutoFormPrimitive>
</template>

Slots

In addition to UForm slots:

• before-fields - Content before generated fields
• after-fields - Content after generated fields
• submit - Custom submit button (not included by default)
• [fieldName] - Override specific field rendering
• [fieldName]-content - Content inside specific field's input

Exposed Methods

All UForm methods are exposed directly. Additionally:

• form - Direct reference to the underlying UForm instance

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

function handleSubmit() {
  formRef?.submit()
}

function handleValidate() {
  formRef?.validate()
}
</script>

<template>
  <AutoFormPrimitive ref="formRef" :schema="schema" :state="state" />
  <UButton @click="handleSubmit" />
</template>

Comparison with AutoForm