[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.

[MarcoVdE]

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...

[runxc1]

So I am upgrading a rather complex form (from Angular 1.x to Vue2) that is in a Vue 2 app and was just looking ahead to see what I will have to do when I inevitably have to update this to Vue3. I was a bit taken back that the validation has changed so dramatically basically making it so that upgrading to Vue 3 will be a huge hassle mainly due to this library. Is there no path forward with v3 of the library?

[logaretm]

@runxc1 Many changes in Vue 3 internals actually break v3, there was no way the API would remain the same. The upside is that we have a much better API now due to these very changes.

[NikhilVerma]

I understand that the Vue 3 internal changes could prevent vee-validate from having the same API. But the new API has almost no resemblance to the previous one. Even the rules are now published as their own module.

Any documentation and support for migration from 3 to 4 will be really appreciated, otherwise it almost feels like swapping one library for another one.

[akshay-rajput]

I came looking for migration guide as I tried using v3 code (written by other dev) with v4 and got error that veevalidate does not provide an export named ValidationProvider. Some kind of guide would help.

[gregmsanderson]

A migration guide would be nice. v4 looks so different that may not be possible. It seems you have to basically start again, translating what the v4 approach would be to what you did in v3. I came here looking for the same, a ValidationProvider equivalent. But that's no longer used.

[walfly]

@logaretm This is incredibly frustrating. I have a large vue2 app that I want to upgrade to vue3 but I can't do that without upgrading vee-validate, so the only option is to rewrite every form in my entire project before i can get it to build in vue3. Can you release a version of vee-validate that has the old api and runs in the vue3? Completely changing the api makes it not only difficult to upgrade this package but basically impossible to upgrade to vue3 at all. Was the assumption that no one would ever be migrating from vue2 to vue3?

[logaretm]

@walfly

Can you release a version of vee-validate that has the old api and runs in the vue3?

Well, that's the impossible part, Vue 3 changed lots of the internals of the VNode which makes the v3 model detection API not possible anymore.

That means the old API was dead anyway you look at it. So either, I release a new library with the new API or move on to a new API with v4. I chose the latter since it wouldn't matter either way as the old API is dead. You would be in the same situation either way or if you want to switch over to another library.

I understand your frustration, but there is nothing I can do here.

[walfly]

Got it, thanks for the quick answer!

[varit05]

Using the npm @vee-validate/rules package helps to migrate the project easily.

[rdhainaut]

Using the npm @vee-validate/rules package helps to migrate the project easily.

Indeed, the official doc give more details about that package and how to use it https://vee-validate.logaretm.com/v4/guide/global-validators#vee-validaterules

[alvaromat]

Use this chatGPT prompt to migrate custom rules:

`extend` function API has been changed and renamed to defineRule:

before:
"""
extend('minmax', {
  validate(value, args) {
    const length = value.length;

    return length >= args.min && length <= args.max;
  },
  params: ['min', 'max']
});
"""

After:
"""
defineRule('minMax', (value, [min, max], ctx) => {
  // The field is empty so it should pass
  if (!value || !value.length) {
    return true;
  }
  const numericValue = Number(value);
  if (numericValue < min) {
    return `Field ${ctx.name} must be greater than ${min}`;
  }
  if (numericValue > max) {
    return `Field ${ctx.name} must be less than ${max}`;
  }
  return true;
});
"""

Please migrate these rules:
"""
// YOUR RULES HERE
"""

[ynhhoJ]

About half a year ago I tried to create an ESLint plugin to easily migrate from Vee-Validate from version 3 to 4, but unfortunately development has stopped shortly. While revisiting my old projects, I came across eslint-plugin-vee-validate-migrator.

I am posting it as is. This is just a Proof of Concept. Feel free to use it in your project, if you want. It may not work perfectly, but can be fixed.

README.md: https://github.com/ynhhoJ/eslint-plugin-vee-validate-migrator/blob/master/README.md

How it works