Vue 3 support #2670

cexbrayat · 2020-03-02T09:38:20Z

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 vee-validate@3.2.5 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?

The text was updated successfully, but these errors were encountered:

logaretm · 2020-03-02T16:34:56Z

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 · 2020-03-02T16:44:09Z

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 · 2020-03-02T23:17:51Z

Both v3 and v4 are in TS 😅

cexbrayat · 2020-03-03T05:58:50Z

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 · 2020-04-21T14:32:56Z

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 · 2020-04-22T00:52:44Z

@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 · 2020-06-12T07:40:13Z

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

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<Vue & {
       |                                                                  ^
    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<Vue & {
      |                                                                  ^
    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<Vue, object, object, object, Record<never, any>>;
      |                                                  ^
    3 | export declare function localeChanged(): void;
    4 | export { EVENT_BUS };
    5 |

xavism · 2020-06-12T08:05:39Z

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 · 2020-08-05T21:04:25Z

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 · 2020-08-05T21:17:10Z

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 · 2020-08-05T23:47:26Z

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

ux-engineer · 2020-09-22T07:29:55Z

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

logaretm · 2020-09-22T09:39:56Z

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

hugoattal · 2020-09-25T13:57:51Z

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 · 2020-09-25T15:30:54Z

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.

hugoattal · 2020-09-25T15:32:59Z

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

ux-engineer · 2020-09-25T15:45:50Z

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

hugoattal · 2020-09-25T17:33:48Z

@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 · 2020-09-25T19:15:04Z

@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 · 2020-11-16T20:23:39Z

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

logaretm added the 🔼 v4.0 Will be handled in the next major version label Mar 2, 2020

logaretm added the 🛳 In PR This issue is being addressed in a PR label Jun 12, 2020

logaretm pinned this issue Oct 7, 2020

This was referenced Oct 17, 2020

List of central vue libraries with their Vue3 compatibility status sonicoder86/awesome-vue-3#30

Closed

Vue3 compatibility status of central vue libraries vuejs/awesome-vue#3544

Open

logaretm closed this as completed Nov 16, 2020

logaretm unpinned this issue Dec 8, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue 3 support #2670

Vue 3 support #2670

cexbrayat commented Mar 2, 2020

logaretm commented Mar 2, 2020

cexbrayat commented Mar 2, 2020 •

edited

Loading

logaretm commented Mar 2, 2020

cexbrayat commented Mar 3, 2020

ux-engineer commented Apr 21, 2020 •

edited

Loading

logaretm commented Apr 22, 2020

xavism commented Jun 12, 2020

xavism commented Jun 12, 2020

earlwilson commented Aug 5, 2020 •

edited

Loading

earlwilson commented Aug 5, 2020

logaretm commented Aug 5, 2020

ux-engineer commented Sep 22, 2020

logaretm commented Sep 22, 2020

hugoattal commented Sep 25, 2020 •

edited

Loading

ux-engineer commented Sep 25, 2020

hugoattal commented Sep 25, 2020

ux-engineer commented Sep 25, 2020

hugoattal commented Sep 25, 2020

logaretm commented Sep 25, 2020

logaretm commented Nov 16, 2020

Vue 3 support #2670

Vue 3 support #2670

Comments

cexbrayat commented Mar 2, 2020

logaretm commented Mar 2, 2020

cexbrayat commented Mar 2, 2020 • edited Loading

logaretm commented Mar 2, 2020

cexbrayat commented Mar 3, 2020

ux-engineer commented Apr 21, 2020 • edited Loading

logaretm commented Apr 22, 2020

xavism commented Jun 12, 2020

xavism commented Jun 12, 2020

earlwilson commented Aug 5, 2020 • edited Loading

earlwilson commented Aug 5, 2020

logaretm commented Aug 5, 2020

ux-engineer commented Sep 22, 2020

logaretm commented Sep 22, 2020

hugoattal commented Sep 25, 2020 • edited Loading

ux-engineer commented Sep 25, 2020

hugoattal commented Sep 25, 2020

ux-engineer commented Sep 25, 2020

hugoattal commented Sep 25, 2020

logaretm commented Sep 25, 2020

logaretm commented Nov 16, 2020

cexbrayat commented Mar 2, 2020 •

edited

Loading

ux-engineer commented Apr 21, 2020 •

edited

Loading

earlwilson commented Aug 5, 2020 •

edited

Loading

hugoattal commented Sep 25, 2020 •

edited

Loading