<AutoFormModal/>
The <AutoFormModal/> component combines UModal with AutoFormPrimitive for a seamless form-in-modal experience with minimal boilerplate.
Basic usage
<script setup lang="ts">
import * as z from 'zod'
const schema = z.object({
email: z.email(),
password: z.string().min(8),
})
const open = ref(false)
function onSubmit(data: z.infer<typeof schema>) {
console.log(data)
open.value = false
}
</script>
<template>
<UButton label="Open Form" @click="open = true" />
<AutoFormModal
v-model:open="open"
title="Login"
description="Enter your credentials"
:schema="schema"
@submit="onSubmit"
/>
</template>
Properties
open (required)
Controls the modal's open state. Use with v-model:open.
schema (required)
The Zod schema that defines your form structure.
initialState
Set default values for form fields.
title
Modal title displayed in the header.
description
Modal description displayed below the title.
modalProps
Additional props to pass to the underlying UModal component.
config
Override default Nuxt Auto Form configuration.
Events
@submit
Emitted when the form is submitted successfully. Receives the form data directly.
@update:open
Emitted when the modal's open state changes.
Exposed methods
submit()
Programmatically trigger form submission.
form
Access to the underlying AutoFormPrimitive reference.
Slots
All slots from AutoFormPrimitive are available:
<AutoFormModal v-model:open="open" :schema="schema" @submit="onSubmit">
<template #email="{ field, state }">
<UInput v-model="state[field]" type="email" />
</template>
</AutoFormModal>
#footer
Customize the footer buttons area. Receives disabled, submit, and close props:
<AutoFormModal v-model:open="open" :schema="schema" @submit="onSubmit">
<template #footer="{ disabled, submit, close }">
<UButton label="Delete" color="error" @click="close" />
<UButton label="Save" :disabled="disabled" @click="submit" />
</template>
</AutoFormModal>
Without cancel button
Use the #footer slot to hide the cancel button:
<AutoFormModal v-model:open="open" :schema="schema" @submit="onSubmit">
<template #footer="{ disabled, submit }">
<UButton label="Confirm" :disabled="disabled" class="w-full" @click="submit" />
</template>
</AutoFormModal>
Examples
With initial state
<script setup lang="ts">
const schema = z.object({
name: z.string(),
email: z.email(),
})
const open = ref(false)
const user = { name: 'John', email: '[email protected]' }
</script>
<template>
<AutoFormModal
v-model:open="open"
title="Edit Profile"
:schema="schema"
:initial-state="user"
@submit="onSubmit"
/>
</template>
Custom modal styling
<template>
<AutoFormModal
v-model:open="open"
title="Settings"
:schema="schema"
:modal-props="{ fullscreen: true }"
@submit="onSubmit"
/>
</template>
Live Example
Contact Us
Click the button to open a modal form