Overload translation

import { z } from 'zod'

export const websiteSchema = z.object({
  name: z.string().min(5).max(15),
  url: z.string().url().min(1)
})

export type Website = z.input<typeof websiteSchema>;

<script setup lang="ts">
  import type { Website } from '~/schema/website.schema'
  import type { FormSubmitEvent } from '#ui/types'

  import { websiteSchema } from '~/schema/website.schema'

  const state = reactive({
    name: 'My website',
    url: 'lol'
  })

  function onSubmit (event: FormSubmitEvent<Website>) {
    console.log(event.data)
  }
</script>

<template>
  <UForm :schema="websiteSchema" :state="state" class="flex flex-col gap-6 pt-6" @submit="onSubmit">
    <UDivider />
    <UFormGroup label="Name" name="name">
      <UInput v-model="state.name" placeholder="Website name" />
    </UFormGroup>
    <UFormGroup label="Url" name="url">
      <UInput v-model="state.url" placeholder="Website url" />
    </UFormGroup>
    <UButton type="submit" class="w-fit">
      Save
    </UButton>
  </UForm>
</template>

{
  "zodI18n": {
    "errors": {
      "invalid_string": {
        "url": "overload by your global translation, original translation: Invalid url"
      }
    }
  }
}