Custom plugin in Typescript after Vue 3.4 update
Nobody has claimed this yet.
- 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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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