vuelidate: TypeScript errors out of the box

I have a Vue project with TypeScript, and just with this code block I’m getting a type error:

Argument of type 'PluginFunction<any>' is not assignable to parameter of type 'PluginObject<any> | PluginFunction<any>'.

import Vue from 'vue';
import Vuelidate from 'vuelidate';

Vue.use(Vuelidate);

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 2
Comments: 18

Most upvoted comments

I had the same problem with similar tsconfig.json. I used yarn in project. As playgound worked fine and neighter deleting node_modules and reinstalling did not helped I expected some tsconfig issue. After some hours of many changes of tsconfig and googling, I found Jan Esser’s comment about two versions of vue in project (https://github.com/vuelidate/vuelidate/pull/287). Confirmed that this was the case.

Problem was caused by yarn duplicates of vue package in yarn.lock. Helped using yarn-deduplicate to fix duplicates followed by yarn install. It worked correctly now. Thank you Jan for good job.

+10

mvandak on May 7, 2019

Versions:

"@vuelidate/core": "^2.0.0-alpha.8",
"@vuelidate/validators": "^2.0.0-alpha.5",

Problem

have the same issue with vue 3 + ts.

Property '$v' does not exist on type 'ComponentPublicInstance<{}, {}, { email: string; password: string; }, {}, { login: ActionMethod; }, EmitsOptions, {}, {}, false, ComponentOptionsBase<{}, {}, { email: string; password: string; }, ... 6 more ..., {}>>'.

import { createApp } from "vue";
import { VuelidatePlugin } from "@vuelidate/core";
...
createApp(App)
  .use(VuelidatePlugin)
  .....

this code triggers an error.

makeDirty(key: string) {
      this.$v[key].$touch();
    }

declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
declare module '@vuelidate/core';
declare module '@vuelidate/validators';

victororlyk on Dec 20, 2020

@mvandak thanks, works fine. After that, close and re open VSC to get the changes.

alvaro-canepa on May 31, 2020

I can say, after running yarn-deduplicate the issues are over!

yooouuri on May 1, 2019

Versions:

"@vuelidate/core": "^2.0.0-alpha.8",
"@vuelidate/validators": "^2.0.0-alpha.5",

Problem

have the same issue with vue 3 + ts.

Property '$v' does not exist on type 'ComponentPublicInstance<{}, {}, { email: string; password: string; }, {}, { login: ActionMethod; }, EmitsOptions, {}, {}, false, ComponentOptionsBase<{}, {}, { email: string; password: string; }, ... 6 more ..., {}>>'.

import { createApp } from "vue";
import { VuelidatePlugin } from "@vuelidate/core";
...
createApp(App)
  .use(VuelidatePlugin)
  .....

this code triggers an error.

makeDirty(key: string) {
      this.$v[key].$touch();
    }

declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
declare module '@vuelidate/core';
declare module '@vuelidate/validators';

Same error, did you resolve this?

adly123 on Jan 19, 2021