docs: introducing plugins api

vuejs · Dec 20, 2023 · 8902e89 · 8902e89
1 parent 1463761
commit 8902e89
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 0 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -11,6 +11,10 @@ const GUIDES: DefaultTheme.NavItemWithLink[] = [
   { text: 'Standalone App', link: '/guide/standalone' },
 ]
 
+const PLUGINS: DefaultTheme.NavItemWithLink[] = [
+  { text: 'API', link: '/plugins/api' },
+]
+
 const VERSIONS: DefaultTheme.NavItemWithLink[] = [
   { text: `v${version} (current)`, link: '/' },
 ]
@@ -41,6 +45,14 @@ export default defineConfig({
         ],
       },
       { text: 'Features', link: '/guide/features' },
+      {
+        text: 'Plugins',
+        items: [
+          {
+            items: PLUGINS,
+          },
+        ],
+      },
       {
         text: `v${version}`,
         items: VERSIONS,
@@ -55,8 +67,31 @@ export default defineConfig({
             text: 'Guide',
             items: GUIDES,
           },
+          {
+            text: 'Plugins',
+            items: [
+              {
+                items: PLUGINS,
+              },
+            ],
+          },
         ],
+        // '/plugins/': [
+        //   {
+        //     text: 'Guide',
+        //     items: GUIDES,
+        //   },
+        //   {
+        //     text: 'Plugins',
+        //     items: [
+        //       {
+        //         items: PLUGINS,
+        //       },
+        //     ],
+        //   },
+        // ],
       },
+
     ),
 
     editLink: {

diff --git a/docs/plugins/api.md b/docs/plugins/api.md
@@ -0,0 +1,46 @@
+# Plugins API
+
+Plugins API for easier DevTools integrations.
+
+## Installation
+
+::: code-group
+
+```sh [npm]
+$ npm add -D @vue/devtools-next-api
+```
+
+```sh [pnpm]
+$ pnpm add -D @vue/devtools-next-api
+```
+
+```sh [yarn]
+$ yarn add -D @vue/devtools-next-api
+```
+
+```sh [bun]
+$ bun add -D @vue/devtools-next-api
+```
+
+:::
+
+## `addCustomTab`
+
+```ts
+import { devtools } from '@vue/devtools-next-api'
+
+addCustomTab({
+  // unique identifier
+  name: 'vue-use',
+  // title to display in the tab
+  title: 'VueUse',
+  // any icon from Iconify, or a URL to an image
+  icon: 'i-logos-vueuse',
+  // iframe view
+  view: {
+    type: 'iframe',
+    src: 'https://vueuse.org/',
+  },
+  category: 'advanced',
+})
+```