Custom plugin in Typescript after Vue 3.4 update

[joaoefornazari]

According to Vue 3.4 docs, if I want to define a custom plugin, I need to create it like this:

// my-custom-plugin.ts
export default {
  install: (app, options) => {
    // do something here with app and options
  }
}

Then, on main.ts, I set app to use it:

import App from './App.vue'
import router from './router'
import customPlugin from './my-custom-plugin'

export const app = createApp(App)
app.use(router)
app.use(customPlugin)

And that was OK until I updated Vue to version 3.4.20. I was using 3.2.45 before.

Now, when I try to build the project with yarn build (which uses vite build too) it throws this error:

Argument of type '{ install: (app: App, options: any) => void; }' is not assignable to parameter of type 'Plugin<[]>'.
  Type '{ install: (app: App, options: any) => void; }' is not assignable to type 'FunctionPlugin<[]>'.

After searching for type definitiions in node_modules/@vue/runtime-core/dist/runtime-core.d.ts, I found out that, in order to Typescript doesn't claim any type errors, I must define my plugin as an ObjectPlugin type.

I did it this way:

import { ObjectPlugin } from 'node_modules/@vue/runtime-core/dist/runtime-core'

export default {
  install: (app, options) => {
    // stuff
  },
} as ObjectPlugin

I can't use Plugin type because it says that Plugin type is deprecated.

Is my fix correct? How can I contribute so the Vue docs has some notes regarding Typescript support?

[NataliaTepluhina]

@joaoefornazari have you reached the issue on the core repository? It looks like we might improve the code instead of adding a specific section to docs 🤔

[joaoefornazari]

@NataliaTepluhina I'll give a try. This is a thing that never happened to me so I was lost in what to do about it - I thought that there was already something on Vue core that would solve this but people forgot to put it on the docs. That's why I opened the issue.

Maybe I open an issue on vuejs/core? What would you recommend?

[brc-dd]

I can't use Plugin type because it says that Plugin type is deprecated.

Where? There is no deprecation notice for that (https://github.com/vuejs/core/blob/01172fdb777f9a0b51781ed2015a1ba3824340a3/packages/runtime-core/src/apiCreateApp.ts#L168). import type { Plugin } from 'vue' should work fine. Also you should not cast it to Plugin, it should be satisfies Plugin:

import type { Plugin } from 'vue'

export default {
  install(app, options) {

  }
} satisfies Plugin

// or if you're using named exports

export const foo: Plugin = {
  install(app, options) {

  }
}

[joaoefornazari]

I solved the problem that happened with me here.

I did it like this:

• my-custom-plugin.ts

// using import { PluginOptions } from 'unocss' also work
import { App, Plugin } from 'vue'

export default {
  install: (app: App, options?: any) => {
    // stuff using app and options (optional)
  },
} satisfies Plugin

• main.ts

import App from './App.vue'
import router from './router'
import customPlugin from './my-custom-plugin'

export const app = createApp(App)
app.use(router)
app.use(customPlugin)

Thanks @brc-dd for the clarification!
But still, this solution ain't listed on the docs. @NataliaTepluhina Shouldn't it be there?

[os-tohe]

I have the exact same problem and the above solution did not work for me. I am using Vue version 3.4.26. I am creating a component library. The plugin works fine when I use it directly in my component library, but when I export the plugin and try to use it in another project it throws these errors:

Argument of type '{ install: (app: App<any>) => void; }' is not assignable to parameter of type 'Plugin<[]>'.
  Type '{ install: (app: App<any>) => void; }' is not assignable to type 'FunctionPlugin<[]>'.
    Type '{ install: (app: App<any>) => void; }' is not assignable to type '(app: App<any>) => any'.
      Type '{ install: (app: App<any>) => void; }' provides no match for the signature '(app: App<any>): any'.ts(2345)

[chriscdn]

I had this issue with v3.4.16, but upgrading to v3.4.29 resolved it.

[dmoczisko]

I'm also seeing this error when bumping to vue version ^3.4.30. Most recent working version is 3.4.25 - Variations of the solutions above do not resolve the problem.

[brc-dd]

Do any of you have a minimal, reproducible example? Also the code in #2729 (comment) is not exactly correct, if you're saying something satisfies Plugin, you don't need type parameters on individual arguments, certainly not two commas and any.

Also it doesn't seem like a docs issue. If you're not able to make something work, a better place to ask might be on https://chat.vuejs.org. In the docs, we can just add a short sub section at https://vuejs.org/guide/reusability/plugins.html#writing-a-plugin showing how to use it with typescript. Basically, something like the equivalent of JS example there:

// plugins/i18n.ts
import type { Plugin } from 'vue'

export default {
  install: (app, options) => {
    // Plugin code goes here
  }
} satisfies Plugin

[joaoefornazari]

@brc-dd Oh, sorry. I didn't see the comma lost over there. Also, the comma is not on my original code, so no problem at all - but I'll fix the code on the comment.

And also: adding a short subsection on the Writing a Plugin page would be good IMO. I really like how Vue docs takes care of mentioning Typescript typing when it is the case. The Vue docs is one of the easiest and "straightforward-est" docs to read out there, so it really surprised me to discover that I had to find out the correct Typescript approach by myself. I know this situation can sound simple, but it wasn't obvious to me and apparently it wasn't for some other people too.

EDIT: Code fixed.

[brc-dd]

Yeah regarding docs I agree. But the last three comments are probably because of something else. They better be posted on discussions/discord. One is saying it works with v3.4.29 and the other is saying that most recent working version is v3.4.25 -- which are obviously conflicting. If any of those can share a repo where this happens we could probably resolve those.

[dmoczisko]

In my particular case, this issue was as a result of a mismatch in package.json files both referencing vue, but with different versions

[luckylark2000]

I meet the same problem with v3.4.29 ,but upgrading to v3.4.30 resolved it。by the way, before I upgrading to v3.4.30, I delete the node_modules and pnpm-lock.yaml, then I reinstall the project by pnpm i , maybe this also help 😄