Vuelidate: Vue 3 Install Error

[daverogers]

• vue 3.0.2
• vuelidate/core 2.0.0-alpha.6
• vuelidate/validators 2.0.0-alpha.4

main.ts:

import App from '@/App.vue'
import { VuelidatePlugin } from '@vuelidate/core'
import { createApp } from 'vue'

const app = createApp(App)

app.use(VuelidatePlugin).mount('#app')

error on line 7 (.use(VuelidatePlugin)):

Argument of type '(app: DefineComponent<readonly string[] | Readonly<ComponentObjectPropsOptions<Record<string, unknown>>>, unknown, unknown, Record<string, ComputedGetter<any> | WritableComputedOptions<...>>, ... 7 more ..., { ...; } | {}>) => void' is not assignable to parameter of type 'Plugin_2'.
  Type '(app: DefineComponent<readonly string[] | Readonly<ComponentObjectPropsOptions<Record<string, unknown>>>, unknown, unknown, Record<string, ComputedGetter<any> | WritableComputedOptions<...>>, ... 7 more ..., { ...; } | {}>) => void' is not assignable to type 'PluginInstallFunction & { install?: PluginInstallFunction | undefined; }'.
    Type '(app: DefineComponent<readonly string[] | Readonly<ComponentObjectPropsOptions<Record<string, unknown>>>, unknown, unknown, Record<string, ComputedGetter<any> | WritableComputedOptions<...>>, ... 7 more ..., { ...; } | {}>) => void' is not assignable to type 'PluginInstallFunction'.
      Types of parameters 'app' and 'app' are incompatible.
        Type 'App<any>' is not assignable to type 'DefineComponent<readonly string[] | Readonly<ComponentObjectPropsOptions<Record<string, unknown>>>, unknown, unknown, Record<string, ComputedGetter<any> | WritableComputedOptions<...>>, ... 7 more ..., { ...; } | {}>'.
          Type 'App<any>' is not assignable to type 'ComponentPublicInstanceConstructor<({ $: ComponentInternalInstance; $data: {}; $props: (Partial<{ [x: number]: string; }> & Pick<(Readonly<{ [x: number]: string; } & { length?: number | undefined; ... 21 more ...; flat?: unknown[] | undefined; }> & VNodeProps & AllowedComponentProps & ComponentCustomProps) | (Readon...'.
            Type 'App<any>' provides no match for the signature 'new (...args: any[]): ({ $: ComponentInternalInstance; $data: {}; $props: (Partial<{ [x: number]: string; }> & Pick<(Readonly<{ [x: number]: string; } & { length?: number | undefined; ... 21 more ...; flat?: unknown[] | undefined; }> & VNodeProps & AllowedComponentProps & ComponentCustomProps) | (Readonly<...> & ... 3 more ... & Readonly<...>) | (Readonly<...> & ... 3 more ... & Readonly<...>) | (Readonly<...> & ... 2 more ... & ComponentCustomProps), "length" | ... 53 more ... | ((<A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<...>[]) & string)>) | (Partial<...> & Pick<...>); ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; } & ... 4 more ... & ComponentCustomProperties) | ({ ...; } & ... 4 more ... & ComponentCustomProperties)'.ts(2345)

Project was set up through Vue CLI, not sure that makes any difference.

[EdisonArango]

I have the same issue, then for now I'm just adding // @ts-ignore on top of each line that's related to Vuelidate.

[aethr]

Looks like in @vuelidate/core/index.d.ts the following change will make the error disappear:

export const VuelidatePlugin: (app: Component) => void;

to

export const VuelidatePlugin: (app: App) => void;

I had a look but I actually couldn't tell how these files are generated. :joy: Will try and get a PR happening this weekend.

[daverogers]

Awesome! I tested that locally and it does work - thank you 👍