Customization
Basics
One of the key features of Nuxt Auto Form is customization, allowing each form to be unique.
There are 3 levels where you can customize a form:
Global Configuration
Want to change the default submit button or button props/styles?
In app.config.ts, you can define global configuration:
export default defineAppConfig({
autoForm: {
submit: {
component: 'SubmitButton', // Name of the component to use as the submit button
props: { // Props to pass to the submit button
color: 'primary',
variant: 'solid',
}
},
},
})
Per-Form Configuration
You can override the global configuration for individual forms using the ui prop in the <AutoForm> component:
<template>
<AutoForm
:schema="schema"
:config="{
submit: {
component: 'CustomSubmitButton',
},
}"
/>
</template>
The configuration is merged using defu.
You can also use slots to override specific fields or components within the form.
See the AutoForm component documentation for more details.
Per-Field Configuration
Zod v4 introduced support for meta data, allowing you to annotate fields:
export interface GlobalMeta {
title?: string
description?: string
example?: unknown
}
nuxt-auto-form extends this with a custom autoForm field inside meta. This lets you define UI widgets, visibility conditions, or custom rendering behavior.
Example:
const schema = z.object({
text: z.string()
.nonempty()
.meta({ title: 'Text Input' }),
bool: z.boolean()
.default(true)
.meta({
title: 'Boolean Input with floatRight',
autoForm: { floatRight: true },
})
})
This configuration is fully type-safe.