Skip to content
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/guide/reusability/plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -139,3 +139,5 @@ export default {
### Bundle for NPM

If you further want to build and publish your plugin for others to use, see [Vite's section on Library Mode](https://vitejs.dev/guide/build.html#library-mode).

See also: [Typing Plugins](/guide/typescript/composition-api#typing-plugins) <sup class="vt-badge ts" />
50 changes: 50 additions & 0 deletions src/guide/typescript/composition-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -476,3 +476,53 @@ const openModal = () => {
```

Note that with `@vue/language-tools` 2.1+, static template refs' types can be automatically inferred and the above is only needed in edge cases.

## Typing Plugins {#typing-plugins}

Vue provides built-in type support for plugins. There are two types of plugins: object plugins and function plugins. The type of the plugin will be automatically inferred by `app.use()`:

```ts
import { type App, createApp } from 'vue'

const app = createApp({})

const objectPlugin = {
install(app: App, options1: { foo: number }, options2: { bar: number }) {
// ...
}
}
app.use(objectPlugin, { foo: 1 }, { bar: 2 })
app.use(objectPlugin, { foo: 1 }) // => TS Error: Expected 2 arguments, but got 1.

const functionPlugin = (app: App, options1: { foo: number }) => {
// ...
}
app.use(functionPlugin, { foo: 1 })
```

Vue provides a `Plugin` utility type to represent both plugin types. You can use it to define your plugin with proper type checking:

```ts
import { type Plugin, createApp } from 'vue'

const app = createApp({})

// Define plugin with array type parameters
const objectPlugin: Plugin<
[options1: { foo: number }, options2?: { bar: number }]
> = {
install(app, options1, options2) {
// ...
}
}
app.use(objectPlugin, { foo: 1 })

// Optional parameters
const functionPlugin: Plugin<[options?: { foo: number }]> = (
app,
options
) => {
// ...
}
app.use(functionPlugin)
```