Customization
<AutoForm/>
The most important component of Nuxt Auto FOrm.
Usage
Schema
The schema prop is the most important part of the <AutoForm> component.
It defines the structure and validation rules for your form using Zod.
Initial State
Use the initialState prop to set default values for your form fields.
It has type Partial<z.InferInput<T>>, where T is your Zod schema type.
You can use it to pre-fill the form with existing data, where for example
you want to provide submit or edit form feature.
Slots
| Slot | Type | Description |
|---|---|---|
before-fields | Slot inside <UForm> before the list of <UFormField> | |
after-fields | Slot inside <UForm> after the list of <UFormField> | |
submit | { disabled: boolean } | Slot for customizing the submit button. disabled indicates whether at least one field is invalid. |
<field> | { field: string, state: Ref<Record<string, any> }> | Dynamic slot for a specific field inside Zod schema. |
Dynamic slots
For each field in your Zod schema, <AutoForm> generates a dynamic slot.
You can use these slots to customize the input components for each field.
MyForm.vue
<script setup lang="ts">
import * as z from 'zod'
const schema = z.object({
custom_bool: z.boolean(),
})
</script>
<template>
<AutoForm :schema="schema">
<template #custom_bool="{ field, state }">
<USelect
v-model="state[field]"
:items="[
{
label: 'False',
value: false,
},
{
label: 'True',
value: true,
},
]"
/>
</template>
</AutoForm>
</template>
And if you want to use a custom component for the submit button, you can do it like this:
MyForm.vue
<template>
<AutoForm :schema="schema">
<template #submit="{ disabled }">
<SubmitButton :disabled />
</template>
</AutoForm>
</template>