Error interpolation

import { z } from 'zod'

// here refine always return false to directly show the error message
export const colorSchema = z.object(color: z.string().refine(() => false, {
  params: {
    i18n: {
      key: 'myCustomErrorWithInterpolation',
      values: { first: 'colors.red', second: 'colors.green' }
    }
  }
})

export type Color= z.input<typeof colorSchema>;

<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({
    color: '',
  })

  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="Color" name="color">
      <UInput v-model="state.color" placeholder="Enter color" />
    </UFormGroup>
    <UButton type="submit" class="w-fit">
      Save
    </UButton>
  </UForm>
</template>

{
  "colors": {
    "green": "green",
    "red": "red"
  },
  "myCustomErrorWithInterpolation": "My preferred colors are {first} and {second}",
}