Plugins API
Plugins API for easier DevTools integrations.
TIP
Since v7.3.0, we are fully compatible with the v6 plugin API. You can check out the API documentation here.
Installation
sh
$ npm add -D @vue/devtools-apish
$ pnpm add -D @vue/devtools-apish
$ yarn add -D @vue/devtools-apish
$ bun add -D @vue/devtools-apiaddCustomTab
You can choose any icon from Material Design Icons or Iconify Ic Baseline, for example star.
ts
import { addCustomTab } from '@vue/devtools-api' addCustomTab({ // unique identifier name: 'vue-use', // title to display in the tab title: 'VueUse', // any icon from material design icons or a URL to an image icon: 'https://vueuse.org/favicon.svg', // iframe view view: { type: 'iframe', src: 'https://vueuse.org/', }, category: 'advanced', }) const SFC = /* vue */ ` <script setup lang="ts"> import { ref } from 'vue' const count = ref(0) </script> <template> <div class="h-full w-full flex flex-col items-center justify-center"> <div> count is {{ count }} </div> <button class="btn" @click="count++"> increment </button> </div> </template> <style scoped> .btn { background-color: #4c51bf; color: #fff; padding: 0.5rem 1rem; border-radius: 0.25rem; border: none; cursor: pointer; } </style> ` addCustomTab({ name: 'plugin-count', title: 'Plugin Count', icon: 'baseline-exposure-plus-1', // SFC view view: { type: 'sfc', sfc: SFC, }, category: 'app', })addCustomCommand
You can choose any icon from Material Design Icons or Iconify Ic Baseline, for example star.
ts
import { addCustomCommand } from '@vue/devtools-api' // Add a custom command with url addCustomCommand({ // unique identifier id: 'vueuse', // title to display in the command title: 'VueUse', // any icon from material design icons or a URL to an image icon: 'https://vueuse.org/favicon.svg', action: { type: 'url', src: 'https://vueuse.org/' } }) // Add a custom command with submenu addCustomCommand({ // unique identifier id: 'vueuse', // title to display in the command title: 'VueUse', // any icon from material design icons or a URL to an image icon: 'https://vueuse.org/favicon.svg', // submenu, which is shown when the menu is clicked children: [ { id: 'vueuse:github', title: 'Github', action: { type: 'url', src: 'https://github.com/vueuse/vueuse' } }, { id: 'vueuse:website', title: 'Website', icon: 'auto-awesome', action: { type: 'url', src: 'https://vueuse.org/' } }, ], })removeCustomCommand
ts
import { removeCustomCommand } from '@vue/devtools-api' // Remove a custom command by id removeCustomCommand('vueuse')onDevToolsClientConnected
ts
import { onDevToolsClientConnected } from '@vue/devtools-api' onDevToolsClientConnected(() => { console.log('devtools client connected') })