Getting Started
Usage
Learn how to auto-generate your first form.
Writing a Schema
Start by creating a standard Zod schema:
const schema = z.object({
username: z.string().nonempty().meta({ title: 'Username' }),
favoriteLanguage: z.enum(['JavaScript', 'TypeScript', 'Java', 'CoffeeScript'])
.meta({
title: 'Favorite Language',
description: 'Choose wisely',
}),
yearsOfExperience: z.number().min(0).max(100),
deployedOnFriday: z.boolean().default(true),
text_description: z.string()
})
You can use any Zod features, such as custom error messages, transformations, or refinements.
Rendering the Form
Use the AutoForm component to automatically generate the form:
<AutoForm :schema="schema" />
Make sure the schema is available in your component’s setup scope.
Customization
If you want to learn how to customize your forms, check out the Customization section.