Configure and validateOnBlur not working with primeVue

[UXProv]

What happened?

I'm trying to trigger the errors display only after the field has been touched. From what I understood from the documentation I should use the configure({ validateOnBlur: true }) to achieve so. Also tried to set all the other properties to false, but unless I get the error message immediatly or onSubmit (I wasn't able to reproduce my local behaviour on stackblitz, but event stackblitz is not working as expected I guess.)

Reproduction steps

1. 2. 3. ...

Version

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

What browsers are you seeing the problem on?

• [X] Firefox
• [ ] Chrome
• [ ] Safari
• [ ] Microsoft Edge

Relevant log output

No response

Demo link

https://stackblitz.com/edit/vee-validate-v4-prime-vue-caaz2i?file=src%2FApp.vue

Code of Conduct

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

[no2ehi]

HI, you use v-bind for each input component:

const [email, emailProps] = defineField('email');

<InputText
           v-bind="emailProps"
            v-model="email"
            aria-describedby="email-help"
            type="email"
            :class="{ 'p-invalid': errors.email }"
/>

[logaretm]

Like @no2ehi mentioned, you need to use the second item returned from the array to bind it to your input. it contains the events needed.

Also move the configure call to be earlier than your defineField calls, I don't recommend running it in the same component, this is mostly a global config to set in your main entry file main.js or otherwise.

configure({
  validateOnBlur: true,
  validateOnChange: false,
  validateOnInput: false,
  validateOnModelUpdate: false,
});

const [fullName, attrs] = defineField('fullName');

         <InputText
          v-bind="attrs"
            v-model="fullName"
            aria-describedby="fullName-help"
            :class="{ 'p-invalid': errors.fullName }"
          />