vuejs / vuejs/docs

Custom plugin in Typescript after Vue 3.4 update

Open
#2,729 12 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

content contribution welcome
Dominant language
Vue
Stars
3.2k
Forks
5k
Avg merge
14d 17h
Merged PRs (30d)
1

Description

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?

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Vue 3.4 plugin documentation and the TypeScript examples in main.ts and my-custom-plugin.ts, then compare them with node_modules/@vue/runtime-core/dist/runtime-core.d.ts. Clarify the supported plugin typing and document the relevant TypeScript guidance, including whether the reported fix is appropriate.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript, vite
Domain
documentation
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.