Vue version

3.2.47

Link to minimal reproduction

Plugin source: https://github.com/mrleblanc101/vue3-transition-expand/tree/types

Steps to reproduce

I'm following the official documentation to create a custom plugin, but I added TypeScript. It's a very simple plugin that import a single component. I extend the component to allow overriding the default value of props from the plugin options. Here is my plugin code:

import type { App, Plugin } from 'vue';
import TransitionExpand from './components/TransitionExpand.vue';

export interface PluginOptions {
    componentName?: string;
    duration?: number;
}

export default {
    install: (app: App, options: PluginOptions = {}) => {
        app.component(options?.componentName || 'TransitionExpand', {
            extends: TransitionExpand,
            setup: TransitionExpand.setup,
            props: {
                duration: {
                    default: options?.duration,
                },
            },
        });
    },
} as Plugin;

export { TransitionExpand };

Here is my import code in a Nuxt 3 app:

import TransitionExpand from 'vue3-transition-expand';
import 'vue3-transition-expand/dist/style.css';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(TransitionExpand, {
        duration: 300,
    });
});

What is expected?

The type definition are not infered correctly.

What is actually happening?

No overload matches this call. Overload 1 of 2, '(plugin: Plugin_2<[{ duration: number; }]>, options_0: { duration: number; }): App', gave the following error. Argument of type 'Plugin_2<any[]>' is not assignable to parameter of type 'Plugin_2<[{ duration: number; }]>'. Type '((app: App, ...options: any[]) => any) & { install?: ((app: App, ...options: any[]) => any) | undefined; }' is not assignable to type 'Plugin_2<[{ duration: number; }]>'. Type '((app: App, ...options: any[]) => any) & { install?: ((app: App, ...options: any[]) => any) | undefined; }' is not assignable to type '((app: App, options_0: { duration: number; }) => any) & { install?: ((app: App, options_0: { duration: number; }) => any) | undefined; }'. Type '((app: App, ...options: any[]) => any) & { install?: ((app: App, ...options: any[]) => any) | undefined; }' is not assignable to type '(app: App, options_0: { duration: number; }) => any'. Types of parameters 'app' and 'app' are incompatible. Type 'import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").App' is not assignable to type 'import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").App'. The types of 'config.errorHandler' are incompatible between these types. Type '((err: unknown, instance: import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBa...' is not assignable to type '((err: unknown, instance: import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBa...'. Type '(err: unknown, instance: import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBas...' is not assignable to type '(err: unknown, instance: import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBas...'. Types of parameters 'instance' and 'instance' are incompatible. Type 'import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBase<any, any, any, any, any...' is not assignable to type 'import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBase<any, any, any, any, any...'. Type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>' is not assignable to type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null'. Type 'import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBase<any, any, any, any, any...' is not assignable to type 'import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBase<any, any, any, any, any...'. Type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>' is not assignable to type '{ $: ComponentInternalInstance; $data: {}; $props: {}; $attrs: Data; $refs: Data; $slots: Readonly; $root: ComponentPublicInstance<...> | null; ... 6 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...ar...'. Types of property '$' are incompatible. Property '_nuxtOnBeforeMountCbs' is missing in type 'import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentInternalInstance' but required in type 'import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentInternalInstance'. Overload 2 of 2, '(plugin: Plugin_2<{ duration: number; }>, options: { duration: number; }): App', gave the following error. Argument of type 'Plugin_2<any[]>' is not assignable to parameter of type 'Plugin_2<{ duration: number; }>'. Type '((app: App, ...options: any[]) => any) & { install?: ((app: App, ...options: any[]) => any) | undefined; }' is not assignable to type 'Plugin_2<{ duration: number; }>'. Type '((app: App, ...options: any[]) => any) & { install?: ((app: App, ...options: any[]) => any) | undefined; }' is not assignable to type '((app: App, options: { duration: number; }) => any) & { install?: ((app: App, options: { duration: number; }) => any) | undefined; }'. Type '((app: App, ...options: any[]) => any) & { install?: ((app: App, ...options: any[]) => any) | undefined; }' is not assignable to type '(app: App, options: { duration: number; }) => any'. Types of parameters 'app' and 'app' are incompatible. Type 'import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").App' is not assignable to type 'import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").App'.

System Info

No response

Any additional comments?

No response

If I remove the options like so:

import TransitionExpand from 'vue3-transition-expand';
import 'vue3-transition-expand/dist/style.css';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(TransitionExpand);
});

I get a different error:

Argument of type 'Plugin_2<any[]>' is not assignable to parameter of type 'Plugin_2<[]>'. Type '((app: App, ...options: any[]) => any) & { install?: ((app: App, ...options: any[]) => any) | undefined; }' is not assignable to type 'Plugin_2<[]>'. Type '((app: App, ...options: any[]) => any) & { install?: ((app: App, ...options: any[]) => any) | undefined; }' is not assignable to type '((app: App) => any) & { install?: ((app: App) => any) | undefined; }'. Type '((app: App, ...options: any[]) => any) & { install?: ((app: App, ...options: any[]) => any) | undefined; }' is not assignable to type '(app: App) => any'. Types of parameters 'app' and 'app' are incompatible. Type 'import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").App' is not assignable to type 'import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").App'. The types of 'config.errorHandler' are incompatible between these types. Type '((err: unknown, instance: import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBa...' is not assignable to type '((err: unknown, instance: import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBa...'. Type '(err: unknown, instance: import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBas...' is not assignable to type '(err: unknown, instance: import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBas...'. Types of parameters 'instance' and 'instance' are incompatible. Type 'import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBase<any, any, any, any, any...' is not assignable to type 'import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBase<any, any, any, any, any...'. Type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>' is not assignable to type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null'. Type 'import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBase<any, any, any, any, any...' is not assignable to type 'import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBase<any, any, any, any, any...'. Type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>' is not assignable to type '{ $: ComponentInternalInstance; $data: {}; $props: {}; $attrs: Data; $refs: Data; $slots: Readonly; $root: ComponentPublicInstance<...> | null; ... 6 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...ar...'. Types of property '$' are incompatible. Property '_nuxtOnBeforeMountCbs' is missing in type 'import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentInternalInstance' but required in type 'import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentInternalInstance'.

I dug into the Vue-core test and I don't see what my issue is. https://github.com/vuejs/core/blob/main/packages/dts-test/appUse.test-d.ts

This might be a Nuxt bug 🤔

Someone suggested trying an earlier version of Vue 3 since 3.2.46/47 brought some TypeSript changes. I tried 3.2.40 and got a slightly different error than above:

Argument of type '{ install(app: App, options: PluginOptions): void; }' is not assignable to parameter of type 'Plugin_2'. Type '{ install(app: App, options: PluginOptions): void; }' is not assignable to type '{ install: PluginInstallFunction; }'. Types of property 'install' are incompatible. Type '(app: App, options: PluginOptions) => void' is not assignable to type 'PluginInstallFunction'. Types of parameters 'app' and 'app' are incompatible. Type 'import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").App' is not assignable to type 'import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").App'. The types of 'config.errorHandler' are incompatible between these types. Type '((err: unknown, instance: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => void) | undefined' is not assignable to type '((err: unknown, instance: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => void) | undefined'. Type '(err: unknown, instance: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => void' is not assignable to type '(err: unknown, instance: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => void'. Types of parameters 'instance' and 'instance' are incompatible. Type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null' is not assignable to type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null'. Type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>' is not assignable to type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null'. Type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>' is not assignable to type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>'. Type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>' is not assignable to type '{ $: ComponentInternalInstance; $data: {}; $props: {}; $attrs: Data; $refs: Data; $slots: Readonly; $root: ComponentPublicInstance<...> | null; ... 6 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; }'. Types of property '$' are incompatible. Property '_nuxtOnBeforeMountCbs' is missing in type 'import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentInternalInstance' but required in type 'import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentInternalInstance'.

This is actually an issue because I was using npm link to test my package and my package was on Vue 3.2.46 while my app was in 3.2.47