<title>Typescript typing error in <Form @submit ...

[mbiciunas]

What happened?

I'm unable to resolve a typescript error showing on the @submit. The specific error is:

Type '(values: { name: string; }) => void' is not assignable to type 'SubmissionHandler<GenericObject, GenericObject, unknown>'.
  Types of parameters 'values' and 'values' are incompatible.
    Property 'name' is missing in type 'GenericObject' but required in type '{ name: string; }'.ts-plugin(2322)
DialogVeeValidate.vue(13, 31): 'name' is declared here.
vee-validate.d.ts(1070, 9): The expected type comes from property 'onSubmit' which is declared here on type '__VLS_NormalizeComponentEvent<NonNullable<Partial<{ onSubmit: SubmissionHandler<GenericObject, GenericObject, unknown>; as: string; initialValues: Record<string, any>; ... 5 more ...; keepValues: boolean; }> & Omit<...> & Record<...>>, { ...; }, "onSubmit", "submit", "submit">'

Updating the onSubmit parameter to remove the type definition resolves the error on the @submit tag but creates a type error on the values parameter (as would be expected).

Please Note:

• I'm using Zod for schema management
• All my code is written using typescript

I'm new to vee-validate so it is very likely I've structured something wrong or made some other trivial mistake. If so, please let me know where I've gone wrong...

Reproduction steps

Here is a stripped down example of a simple form component showing the error:

<script setup lang="ts">
  import { Form } from 'vee-validate';
  import { toTypedSchema } from '@vee-validate/zod';
  import * as zod from 'zod';
  import TextInput from '@/components/forms/validation/TextInput.vue';

  const validationSchema = toTypedSchema(
    zod.object({
      name: zod.string().min(1, { message: 'Name is required' }),
    })
  );

  function onSubmit(values: { name: string }) {
    alert(JSON.stringify(values, null, 2));
  }

  function onInvalidSubmit() {
    const submitBtn = document.querySelector('.submit-btn');
    submitBtn?.classList.add('invalid');
    setTimeout(() => {
      submitBtn?.classList.remove('invalid');
    }, 1000);
  }
</script>

<template>
  <Form @submit="onSubmit" :validation-schema="validationSchema" @invalid-submit="onInvalidSubmit">
    <v-label class="mb-1">Name</v-label>
    <TextInput
      name="name"
      type="text"
      label="Enter you full name"
      persistent-placeholder
      placeholder="Your Name"
      success="Nice to meet you!"
    />
    <v-btn type="submit" class="submit-btn" variant="flat" color="primary">Submit</v-btn>
  </Form>
</template>

The TextInput component shouldn't be relevant can can be replaced by a simple text input.

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

Typing error from vscode:

Type '(values: { name: string; }) => void' is not assignable to type 'SubmissionHandler<GenericObject, GenericObject, unknown>'.
  Types of parameters 'values' and 'values' are incompatible.
    Property 'name' is missing in type 'GenericObject' but required in type '{ name: string; }'.ts-plugin(2322)
DialogVeeValidate.vue(13, 31): 'name' is declared here.
vee-validate.d.ts(1070, 9): The expected type comes from property 'onSubmit' which is declared here on type '__VLS_NormalizeComponentEvent<NonNullable<Partial<{ onSubmit: SubmissionHandler<GenericObject, GenericObject, unknown>; as: string; initialValues: Record<string, any>; ... 5 more ...; keepValues: boolean; }> & Omit<...> & Record<...>>, { ...; }, "onSubmit", "submit", "submit">'

Demo link

N/A - Don't know how to do this.

Code of Conduct

• I agree to follow this project's Code of Conduct