Error: No such validator 'VVTypedSchema' exists.

[scycer]

Trying to use zod as a validator but it errors when using the "toTypedSchema" output as the form validate. Even using this demo code errors for me
https://vee-validate.logaretm.com/v4/integrations/zod-schema-validation#form-level-validation

Any ideas what I may be missing? Thanks in advance for any assistant

<template>
  <div class="card">
    <div class="card-title">{{ props.entity.id }}: {{ props.entity.name }}</div>
    <div class="card-content">
      <VeeForm :validation-schema="validationSchema" @submit="onSubmit">
        <template v-for="(value, key) in entity" :key="key">
          <div>
            <label :for="(key as string)">{{ key }}</label>
            <VeeField
              v-model="entity[key]"
              :name="typeof key === 'string' ? key : key.toString()"
              :type="getFieldType(key)"
              @input="emitChange"
            />
            <VeeErrorMessage
              :name="typeof key === 'string' ? key : key.toString()"
            />
          </div>
        </template>
        <button type="submit">Submit</button>
      </VeeForm>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { toTypedSchema } from '@vee-validate/zod'
import type { ZodObject, ZodRawShape } from 'zod'

const props = defineProps<{
  entity: Record<string, unknown>
  validationSchema: ZodObject<ZodRawShape>
}>()

const emit = defineEmits(['update:entity', 'submit'])

const entity = ref({ ...props.entity })

const validationSchema = toTypedSchema(props.validationSchema)

const onSubmit = (values: unknown) => {
  emit('submit', values)
}

const emitChange = () => {
  emit('update:entity', entity.value)
}

watch(
  () => props.entity,
  newValue => {
    entity.value = { ...newValue }
  },
  { deep: true }
)

const getFieldType = (keyParam: string | number) => {
  const key = keyParam.toString()
  if (key.toLowerCase().includes('date')) return 'date'
  if (typeof entity.value[key] === 'number') return 'number'
  return 'text'
}
</script>

<style lang="scss" scoped>
.card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-title {
  font-size: 20px;
  font-weight: bold;
  color: #051532;
  padding: 16px 24px;
}

.card-content {
  padding: 24px;
}
</style>

[luisfgfurtado]

Hey @scycer , I have the same problem. Did you manage to solve it?

[scycer]

No sorry, we switched over to using yup as it turns out our internal UI component library was already using that under the hood so it was easier to continue with that

[luisfgfurtado]

I'm almost giving up on zod and thinking about using yup... but my backend uses zod and I already have all the validation schemas ready.
Thanks for quick answer! 👍