Vee-validate: Vue 3 support

[cexbrayat]

I apoligize if there is a tracking issue for this, but I could not find one.

Is your feature request related to a problem? Please describe.

Currently, we can not use vee-validate with Vue 3 in a CLI project with TypeScript.
There are errors on :

• yarn build
• yarn serve and at runtime

When using [email protected] with Vue 3 (3.0.0-alpha.7 at the moment), the TyepScript compiler throws on yarn build:

ERROR in /Users/.../my-project/node_modules/vee-validate/dist/types/components/Observer.d.ts(19,49):
19:49 Cannot find module 'vue/types/vue'.
    17 |     failed: boolean;
    18 | }
  > 19 | export declare const ValidationObserver: import("vue/types/vue").ExtendedVue<Vue & {
       |                                                 ^
    20 |     $_veeObserver: VeeObserver;
    21 |     $vnode: VNodeWithVeeContext;
    22 | }, {

 error  in /Users/.../my-project/node_modules/vee-validate/dist/types/components/Provider.d.ts

ERROR in /Users/.../my-project/node_modules/vee-validate/dist/types/components/Provider.d.ts(3,49):
3:49 Cannot find module 'vue/types/vue'.
    1 | import Vue from 'vue';
    2 | import { ValidationFlags, ValidationResult, VeeObserver, VNodeWithVeeContext } from '../types';
  > 3 | export declare const ValidationProvider: import("vue/types/vue").ExtendedVue<Vue & {
      |                                                 ^
    4 |     $_veeObserver: VeeObserver;
    5 |     _needsValidation: boolean;
    6 |     _inputEventName: string;

 error  in /Users/.../my-project/node_modules/vee-validate/dist/types/localeChanged.d.ts

ERROR in /Users/.../my-project/node_modules/vee-validate/dist/types/localeChanged.d.ts(2,33):
2:33 Cannot find module 'vue/types/vue'.
    1 | import Vue from 'vue';
  > 2 | declare const EVENT_BUS: import("vue/types/vue").CombinedVueInstance<Vue, object, object, object, Record<never, any>>;
      |                                 ^
    3 | export declare function localeChanged(): void;
    4 | export { EVENT_BUS };
    5 |

 error  in /Users/.../my-project/node_modules/vee-validate/dist/types/types.d.ts

ERROR in /Users/.../my-project/node_modules/vee-validate/dist/types/types.d.ts(10,44):
10:44 Cannot use namespace 'Vue' as a type.
     8 |     regenerateMap?: Record<string, () => string>;
     9 | }
  > 10 | export declare type VueValidationContext = Vue & {
       |                                            ^
    11 |     $_veeObserver?: VeeObserver;
    12 | };
    13 | export declare type Locator = {

 error  in /Users/.../my-project/node_modules/vee-validate/dist/types/types.d.ts

ERROR in /Users/.../my-project/node_modules/vee-validate/dist/types/types.d.ts(75,14):
75:14 Cannot use namespace 'Vue' as a type.
    73 | }
    74 | export declare type VNodeWithVeeContext = VNode & {
  > 75 |     context: Vue & {
       |              ^
    76 |         $_veeObserver?: VeeObserver;
    77 |     };
    78 | };

Then yarn serve also complains:

 WARNING  Compiled with 3 warnings                                                                                                10:32:20 AM

 warning  in ./node_modules/vee-validate/dist/vee-validate.esm.js

"export 'default' (imported as 'Vue') was not found in 'vue'

 warning  in ./node_modules/vee-validate/dist/vee-validate.esm.js

"export 'default' (imported as 'Vue') was not found in 'vue'

 warning  in ./node_modules/vee-validate/dist/vee-validate.esm.js

"export 'default' (imported as 'Vue') was not found in 'vue'

and then it throws at runtime:

TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor
chunk-vendors.js line 2085 > eval:866:17
    <anonyme> vee-validate.esm.js:853
    js chunk-vendors.js:2085

What is your plan for Vue 3 support?

[logaretm]

It's being worked on in the next branch, so far while I have a working draft of the basic validation functions. It still doesn't support most of the features at the moment and I'm slowly building them back up.

No ETA though

[cexbrayat]

Awesome, thank you for your answer. I see you are writing the enxt version in TS as well so that should solve the typings issue 👌 I look forward to give it a try, thank you for your work!

[logaretm]

Both v3 and v4 are in TS 😅

[cexbrayat]

Haha I know (and you know I know, as I already contributed a few things 😆). I meant that it will be in TS _as well_ so the typings should not be an issue 😉 .

[ux-engineer]

Is there a way to install from next branch via NPM and have it working with Vue 3.0 beta?

Currently it's not finding import { required, min, max } from 'vee-validate/dist/rules'; as it seems installing from this branch is not having dist build available.

Also can't use Vue.component() with Vue 3...?

[logaretm]

@ux-engineer I'm working on a alpha/beta release very soon. The API has changed a little bit and the rules are no longer available as part of the core package and will be published independently in @vee-validate/rules.

[xavism]

This is not only happening with Vue 3, I'm also experimenting problems when using extend() in a Nuxt wit Vue v2.6.11 with Typescript 3.8.3 and vee-validate 3.3.3

``` bash
ERROR in /**/node_modules/vee-validate/dist/types/components/Observer.d.ts(19,66): nuxt:typescript 09:32:41
19:66 Namespace '"vue/types/vue"' has no exported member 'ExtendedVue'.
17 | failed: boolean;
18 | }

19 | export declare const ValidationObserver: import("vue/types/vue").ExtendedVue | ^
20 | $_veeObserver: VeeObserver;
21 | $vnode: VNodeWithVeeContext;
22 | }, {

ERROR ERROR in /**/node_modules/vee-validate/dist/types/components/Provider.d.ts(3,66): nuxt:typescript 09:32:41
3:66 Namespace '"vue/types/vue"' has no exported member 'ExtendedVue'.
1 | import Vue from 'vue';
2 | import { ValidationFlags, ValidationResult, VeeObserver, VNodeWithVeeContext } from '../types';

3 | export declare const ValidationProvider: import("vue/types/vue").ExtendedVue | ^
4 | $_veeObserver: VeeObserver;
5 | _needsValidation: boolean;
6 | _inputEventName: string;

ERROR ERROR in /**/node_modules/vee-validate/dist/types/localeChanged.d.ts(2,50): nuxt:typescript 09:32:41
2:50 Namespace '"vue/types/vue"' has no exported member 'CombinedVueInstance'.
1 | import Vue from 'vue';

2 | declare const EVENT_BUS: import("vue/types/vue").CombinedVueInstance>;
| ^
3 | export declare function localeChanged(): void;
4 | export { EVENT_BUS };
5 |
````

[xavism]

now it's not sure if it is the same issue, the problem is that vee-validate declaration files are not able to find ExtendedVue and CombinedVueInstance from vue types.
I'm going to create a new issue and feel free to mark it as duplicated @logaretm

thx ❤️

[earlwilson]

Has there been any update on this? I am currently experiencing a similar problem and I am on Vue 2.6.11 and Vee-Validate 3.3.8 and Typescript 3.8 .

Are there any work arounds? @logaretm

[earlwilson]

Let me clarify that what I am experiencing is an error at runtime

vee-validate.esm.js:853 Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0___default.a is not a constructor
    at Module.<anonymous> (vee-validate.esm.js:853)
    at __webpack_require__ (bootstrap:19)
    at Object.<anonymous> (app.ts:4)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

[logaretm]

@earlwilson can you show me a code snippet of your setup? it will help a lot if you reproduce it on codesandbox.

[ux-engineer]

@logaretm now that Vue 3.0 is marked stable, how is the development of Vue 3.0 support for this library progressing?

[logaretm]

@ux-engineer You can use v4 releases with Vue 3, it is still at alpha stages but I think it can go beta very soon. There are a few scenarios I haven't tested and the documentation content is not finalized.

[TheHerobrine]

For the documentation, check it here: https://vee-validate.logaretm.com/v4/guide/overview

(I spent a few time searching for the v4 documentation, so that might help some folks 😅)

[ux-engineer]

For the documentation, check it here: https://vee-validate.logaretm.com/v4/guide/

(I spent a few time searching for the v4 document, so that might help some folks 😅)

Page Not Found
Looks like you've followed a broken link or entered a URL that doesn't exist on this site.

[TheHerobrine]

@ux-engineer Sorry, didn't know why it was missing the last part... I just updated it.

[ux-engineer]

From the first glance I'm wondering how well does this work when used with a front-end framework like Bootstrap-Vue, which has it's own form elements...

[TheHerobrine]

@ux-engineer I never used Bootstrap-Vue, but I guess, you'll just have to use the "as" prop like that ?

<template>
  <Form v-slot="{ errors }">
    <Field name="field" as="b-form-input" :rules="isRequired">
    {{ errors.field }}
  </Form>
</template>

[logaretm]

@ux-engineer It should work as @TheHerobrine pointed out, it's too early to say as I think Vue 3 support from UI libraries is still underway.

[logaretm]

v4 is now live, still residing in the next tag to prevent accidental installs with Vue 2