Vee-validate with Zod: Custom Error Message Not Displaying on Blur in Vue 3 Composition API

Question

I'm trying to use vee-validate with zod using Composition API and custom error messages.

The problem is that if I click into the input and immediately click outside the input it will show the default Zod error message of "Required". It will only show the correct custom "Business name is required" error message if I put text into the input and then delete it.

How do I stop it showing the default error message? It should always be using the custom error message.

Here is a live version: https://stackblitz.com/edit/nuxt-starter-qlkfhp?file=components%2FMyForm.vue

<template>
  <form class="m-6">
    <InputText v-model="businessName" v-bind="businessNameAttrs" />
    <div>{{ errors.businessName }}</div>
  </form>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';
import { z } from 'zod';

const formSchema = toTypedSchema(
  z.object({
    businessName: z.string().min(1, { message: 'Business name is required' }),
  })
);

const { errors, handleSubmit, defineField } = useForm({
  validationSchema: formSchema,
});

const [businessName, businessNameAttrs] = defineField('businessName');
</script>

Answer 1

you can use the required_error key to do that:

For example:

const formSchema = toTypedSchema(
  z.object({
    businessName: z
      // add required_error key over here
      .string({ required_error: 'Business name is required' })
      .min(1, { message: 'Business name is required' }),
  })
);

There's also other key that you can use there that you can check here