Skip to content

Commit 13c4d10

Browse files
committed
tweaks
1 parent 7761526 commit 13c4d10

File tree

2 files changed

+49
-51
lines changed

2 files changed

+49
-51
lines changed

src/guide/reusability/plugins.md

+49-1
Original file line numberDiff line numberDiff line change
@@ -140,4 +140,52 @@ export default {
140140

141141
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).
142142

143-
See also: [Typing Plugins](/guide/typescript/composition-api#typing-plugins) <sup class="vt-badge ts" />
143+
## Typing Plugins {#typing-plugins}
144+
145+
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()`:
146+
147+
```ts
148+
import { type App, createApp } from 'vue'
149+
150+
const app = createApp({})
151+
152+
const objectPlugin = {
153+
install(app: App, options1: { foo: number }, options2: { bar: number }) {
154+
// ...
155+
}
156+
}
157+
app.use(objectPlugin, { foo: 1 }, { bar: 2 })
158+
app.use(objectPlugin, { foo: 1 }) // => TS Error: Expected 2 arguments, but got 1.
159+
160+
const functionPlugin = (app: App, options1: { foo: number }) => {
161+
// ...
162+
}
163+
app.use(functionPlugin, { foo: 1 })
164+
```
165+
166+
Vue provides a `Plugin` utility type to represent both plugin types. You can use it to define your plugin with proper type checking:
167+
168+
```ts
169+
import { type Plugin, createApp } from 'vue'
170+
171+
const app = createApp({})
172+
173+
// Define plugin with array type parameters
174+
const objectPlugin: Plugin<
175+
[options1: { foo: number }, options2?: { bar: number }]
176+
> = {
177+
install(app, options1, options2) {
178+
// ...
179+
}
180+
}
181+
app.use(objectPlugin, { foo: 1 })
182+
183+
// Optional parameters
184+
const functionPlugin: Plugin<[options?: { foo: number }]> = (
185+
app,
186+
options
187+
) => {
188+
// ...
189+
}
190+
app.use(functionPlugin)
191+
```

src/guide/typescript/composition-api.md

-50
Original file line numberDiff line numberDiff line change
@@ -476,53 +476,3 @@ const openModal = () => {
476476
```
477477

478478
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.
479-
480-
## Typing Plugins {#typing-plugins}
481-
482-
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()`:
483-
484-
```ts
485-
import { type App, createApp } from 'vue'
486-
487-
const app = createApp({})
488-
489-
const objectPlugin = {
490-
install(app: App, options1: { foo: number }, options2: { bar: number }) {
491-
// ...
492-
}
493-
}
494-
app.use(objectPlugin, { foo: 1 }, { bar: 2 })
495-
app.use(objectPlugin, { foo: 1 }) // => TS Error: Expected 2 arguments, but got 1.
496-
497-
const functionPlugin = (app: App, options1: { foo: number }) => {
498-
// ...
499-
}
500-
app.use(functionPlugin, { foo: 1 })
501-
```
502-
503-
Vue provides a `Plugin` utility type to represent both plugin types. You can use it to define your plugin with proper type checking:
504-
505-
```ts
506-
import { type Plugin, createApp } from 'vue'
507-
508-
const app = createApp({})
509-
510-
// Define plugin with array type parameters
511-
const objectPlugin: Plugin<
512-
[options1: { foo: number }, options2?: { bar: number }]
513-
> = {
514-
install(app, options1, options2) {
515-
// ...
516-
}
517-
}
518-
app.use(objectPlugin, { foo: 1 })
519-
520-
// Optional parameters
521-
const functionPlugin: Plugin<[options?: { foo: number }]> = (
522-
app,
523-
options
524-
) => {
525-
// ...
526-
}
527-
app.use(functionPlugin)
528-
```

0 commit comments

Comments
 (0)