Method defineComponentBinds value does not have valid type

[filipbekic01]

What happened?

Using Vue SFC TypeScript, composition API.

Schema

export const AddressDto = z.object({
  receipt: z.string().min(1).max(200)
});

Usage

...
const { defineComponentBinds } = useForm<AddressDtoType>({
  validationSchema: toTypedSchema(AddressDto)
});

const receipt = defineComponentBinds("receipt");

The problem is that receipt.value has no proper type in TypeScript.

I can't even use v-bind against my custom component because it does not recognize modelValue, I'm getting type errors.

Reproduction steps

No response

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

No response

Demo link

https://google.com

Code of Conduct

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

[logaretm]

What do your component props look like? why would it give an error? There is hardly anything in the binding object type-wise to error out which was intended to avoid mismatching prop types.

The binding object is a computed property so it is expected for it to have a .value and the template should auto unwrap it. So I'm not sure why it errors out. value is correct there.

[mwohlan]

I just noticed the same issue when working on form components in my nuxt (3.7.0) project I haven't touched in a while. My old code (using defineComponentBinds as well) works fine but none of the types except for onBlur are available to the IDE (vscode + volar)

Have you already found a solution @filipbekic01 since its been 3 weeks ?

[logaretm]

@mwohlan Could you create a minimal example where the type error appears?

[mwohlan]

Having a quick look at the source + type definition, this is the one i found for BaseComponentBinds

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export interface BaseComponentBinds<TValue = unknown, TModel = 'modelValue'> {
  onBlur: () => void;
}

And this is the one for BaseInputBinds ( types are working for defineInputeBinds):

export interface BaseInputBinds<TValue = unknown> {
  value: TValue | undefined;
  onBlur: (e: Event) => void;
  onChange: (e: Event) => void;
  onInput: (e: Event) => void;
}

I have a feeling that this might be the cause. If not than i will do a reproduction as well.

[mwohlan]

@logaretm I just set up a new nuxt 3.7.1 project with only the vee-validate module running in vscode 1.8.1 ( Typescript 5.1.6 ) with Volar. When using defineComponentBinds to create a ref only onBlur shows up when typing myField.value. whereas modelValue and onUpdate:modelValue are not available. However they are available at runtime of course. It seems to be a typescript issue.

[filipbekic01]

Yes, the problem is obvious. Requires minimal setup.

[logaretm]

Pushed a few improvements, it could possibly still have some issues but the main thing is the component binds should now contain both the model and the update model handler based on the model name and the value of that model as inferred from the form.

Note that undefined must be handled in your components as a possible model value.

And please next time, provide the "minimal setup" if it is that "obvious" won't take 5 minutes of your time.