Preprocessors

Preprocessors let you transform string values in meta() using prefixes like $i18n:. They work recursively on all nested properties including input.props.placeholder.

Built-in: $i18n:

When vue-i18n is available, the module auto-registers $i18n: to translate strings via $t(). This allows you to keep your form schemas translation-ready without any extra configuration.

const schema = z.object({
  username: z.string()
    .min(3, '$i18n:validation.username_min')
    .meta({
      title: '$i18n:auth.username',
      description: '$i18n:auth.username_description',
      input: {
        props: {
          placeholder: '$i18n:auth.username_placeholder',
        },
      },
    }),
})

The $i18n: processor passes the key (e.g., auth.username) to the $t() function, so you can use any translation key format supported by your i18n setup.

Custom preprocessors

Add your own via autoForm.metaStringProcessors in app.config.ts:

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

The $ prefix and : suffix are added automatically, so you can use $upper: and $slug: in your schemas without defining them explicitly in the config.

Custom preprocessors work everywhere including:

• Meta field labels, descriptions, and placeholders
• Input component props

Processor signature

Each processor receives the value after the prefix and a context object:

type Processor = (value: string, context: {
  key: string      // Field name
  path: string     // Dot-notation path in meta object
  meta: object     // Full meta object
  config: object   // AutoForm config
}) => any

Example with context:

export default defineAppConfig({
  autoForm: {
    metaStringProcessors: {
      prefix: (value, { key }) => `${key}: ${value}`,
    },
  },
})

Unknown prefix warnings

If a string starts with a prefix-like pattern (e.g., $foo:) but no processor is registered, a warning is logged once per prefix.

See also

• Config - register preprocessors in app.config.ts
• Fields - customize field labels, descriptions, and input props that preprocessors can transform