Basic usage

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.

Next steps

Good job! You have successfully created your first auto-generated form. Now you can explore more advanced features and customization options.

• AutoForm - learn more about the <NuxtAutoForm> component
• Customization - explore various ways to customize the form
• Preprocessors - integrate with vue-i18n or transform meta strings using custom preprocessors
• Migration - learn how to migrate to Nuxt Auto Form

Example