Vee-validate: [v4] - Migration Guide

[DM2489]

Is there a migration guide, explaining the changes upgrading from 3.3 to 4.0?

[logaretm]

I plan to release a few posts on the changes and maybe collect them in a guide but there is no direct upgrade route as the API is completely different, plus it does not support Vue 2.

[DM2489]

@logaretm Awesome, thanks for the info. I don't mind contributing to the documentation if this helps you. Even letting people know that v4 is for Vue 3 and v3 is for Vue2 is going to be useful for people.

[logaretm]

Feel free to contribute to the docs in any way you see suitable, you can find everything in the next branch

[bodograumann]

Do you think it might be less confusing for users, if the new version gets a completely new name, given how different it will be? Even more so, as v2 and v3 work with Vue 2 and v4 will work with Vue 3.

[logaretm]

@bodograumann I thought about that initially, but aside from how hard is it to find a new name, I think it is better to build on the existing popularity of vee-validate especially not everyone who used vee-validate will switch to the new package and I would be gettings tons of requests for Vue 3 support.

[marcoValkyriweb]

Sorry, not sure if this should be a new issue or as a question to be asked to add to the migration guide, but as part of the migration guide or as a new feature, how do you handle select?

Trying to do this:

<v-field
  name="countryOfResidence"
  as="select"
  type="text"
  label="Country Of Residence"
  :rules="schema.required"
>
  <option value="Country">Country</option>
</v-field>

Or any other way to have the form generate it via dynamic? Getting an error as

Should I be keeping it separate from the rest of the form and then using a callback on submit to check that it's been set?

Using the as prop for it does render the correctly render a select list though.

Thanks for any help

[ux-engineer]

@logaretm just a hint that there is this vue-demi package which can be used for providing Vue 2 and Vue 3 support for library developers.

Bootstrap-Vue is currently testing it out for their Vue 3 support version: https://github.com/bootstrap-vue/bootstrap-vue/issues/5196#issuecomment-716185958

[logaretm]

@ux-engineer I already use vue-demi for another lib (villus) which works fine there, however for vee-validate it will be tricky as a large portion of the code base depends on the new VNode API which wouldn't work. So basically Field and Form components won't work.

Another reason is that some of the internals of vee-validate now relies on adding/removing properties at runtime, which means the old reactivity caveats still apply and won't work well with v4, that means limited feature support for useField and useForm and edge cases will be more apparent and confusing in Vue 2.

[KuenzelIT]

@logaretm Awesome, thanks for the info. I don't mind contributing to the documentation if this helps you. Even letting people know that v4 is for Vue 3 and v3 is for Vue2 is going to be useful for people.

I did not read this in the documentation. Does this mean v4 is incompatible to Vue 2?

[logaretm]

@KuenzelIT Yes it's only for Vue 3, it's in the readme at moment but I guess I need to add a more clear banner on top or something.

[theo333]

@KuenzelIT Yes it's only for Vue 3, it's in the readme at moment but I guess I need to add a more clear banner on top or something.

Hi @logaretm. Thank you for all of the hard work you have put into VeeValidate. I'm new to your library. In addition to the banner, you might want to also put the Vue Version Support section you have in the README also in the docs for both versions. The README is clear that v4 is only for Vue 3, but I do not think the docs are as clear.

I am currently using Vue 2, but eventually would like to move to Vue 3. Unfortunately, that would require me to use v3 initially and then rewrite everything using v4. Hmm...