From 776152605229c88f9dbef4f938e75aed8736f932 Mon Sep 17 00:00:00 2001
From: tycho <jh.leong@outlook.com>
Date: Thu, 27 Mar 2025 12:08:15 +0800
Subject: [PATCH 1/2] docs: add typing support documentation for plugins
---
src/guide/reusability/plugins.md | 2 +
src/guide/typescript/composition-api.md | 50 +++++++++++++++++++++++++
2 files changed, 52 insertions(+)
diff --git a/src/guide/reusability/plugins.md b/src/guide/reusability/plugins.md
index a9d653eb92..0824727e63 100644
--- a/src/guide/reusability/plugins.md
+++ b/src/guide/reusability/plugins.md
@@ -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" />
diff --git a/src/guide/typescript/composition-api.md b/src/guide/typescript/composition-api.md
index 2368dc0f78..dea671eacf 100644
--- a/src/guide/typescript/composition-api.md
+++ b/src/guide/typescript/composition-api.md
@@ -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)
+```
From 13c4d1052cb502ffa0814712161f997c94a8022f Mon Sep 17 00:00:00 2001
From: tycho <jh.leong@outlook.com>
Date: Fri, 11 Apr 2025 14:36:30 +0800
Subject: [PATCH 2/2] tweaks
---
src/guide/reusability/plugins.md | 50 ++++++++++++++++++++++++-
src/guide/typescript/composition-api.md | 50 -------------------------
2 files changed, 49 insertions(+), 51 deletions(-)
diff --git a/src/guide/reusability/plugins.md b/src/guide/reusability/plugins.md
index 0824727e63..bbd80e89c1 100644
--- a/src/guide/reusability/plugins.md
+++ b/src/guide/reusability/plugins.md
@@ -140,4 +140,52 @@ export default {
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" />
+## 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)
+```
diff --git a/src/guide/typescript/composition-api.md b/src/guide/typescript/composition-api.md
index dea671eacf..2368dc0f78 100644
--- a/src/guide/typescript/composition-api.md
+++ b/src/guide/typescript/composition-api.md
@@ -476,53 +476,3 @@ 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)
-```