Config

You do not need to configure Nuxt Auto Form, but you can do so for finer-grained control you can override the config in the app.config.ts file or per form basis.

The configuration is merged using defu.

Global Configuration

You can set global configuration options for the module in your app.config.ts file in the autoForm field Here you can define your default styles like submit button color.

export default defineNuxtConfig({
  modules: ['@norbiros/nuxt-auto-form'],
  autoForm: {
    // Options
  }
})

Per-Form Configuration

Sometimes you may want to override the global configuration for individual forms. You can do this by passing a config prop to the <AutoForm> component:

<template>
  <AutoForm
    :schema="schema"
    :config="{
      submit: {
        component: 'CustomSubmitButton',
      },
    }"
  />
</template>

Fields

components

This is one of the most important configuration options. It allows you to specify which Vue component should be used to render each field type in the form.

Sadly, there are a lot of limitations related to app.config.ts. It means that you cannot import components directly in the config.

To work around this limitation, you can create a nuxt plugin, where you modify the autoForm config object.

import { defineNuxtPlugin } from '#app'
import { UInput } from '#components'

export default defineNuxtPlugin((_) => {
  updateAppConfig(
    {
      autoForm: {
        components: {
          email: () => ({ component: UInput, componentProps: { type: 'email', trailingIcon: 'i-lucide-at-sign' } }),
        },
      },
    },
  )
})

So how does it work? When a field in a form is rendered, the module automatically generates a key:

zodType._def.format ?? zodType._def.type

This key is used to look up the component to render the field from the components mapping. By providing a custom mapping you can override or add support for additional field types.

components: {
  email: () => ({ component: 'UInput', componentProps: { type: 'email' } }),
}

submit

This option allows you to customize the submit button used in forms. Consult the Submit Button documentation for more information.

{
  component?: undefined
  props?: Record<string, any>
}

modal

Set default button labels for <AutoFormModal/>. This is useful for i18n or ensuring consistent wording across all modal forms.

{
  /** Default label for the submit button. @default 'Submit' */
  submitLabel?: string
  /** Default label for the cancel/close button. @default 'Cancel' */
  closeLabel?: string
}

export default defineAppConfig({
  autoForm: {
    modal: {
      submitLabel: 'Confirm',
      closeLabel: 'Dismiss',
    },
  },
})

theme

This option allows you to customize default form themes.

{
  /**
  * Apply `w-full` class to all input components by default.
  * @default true
  */
  wFull?: boolean
  /**
  * Generate default labels from field names globally. Set to `false` to disable auto-generated labels.
  * Manually set titles via `meta().title` will still render regardless of this setting.
  * @default true
  */
  enableDefaultTitles?: boolean
}

metaStringProcessors

Register custom preprocessors that transform prefixed strings in meta(). This is useful for integrating with vue-i18n or applying custom string transformations to labels, descriptions, and placeholders.

export default defineAppConfig({
  autoForm: {
    metaStringProcessors: {
      upper: value => value.toUpperCase(),
      slug: value => value.trim().toLowerCase().replaceAll(' ', '-'),
    },
  },
})

See the Preprocessors documentation for full details and the processor signature.