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

npm

$ npm add -D @vue/devtools-api

pnpm

$ pnpm add -D @vue/devtools-api

yarn

$ yarn add -D @vue/devtools-api

bun

$ bun add -D @vue/devtools-api

addCustomTab

You can choose any icon from Material Design Icons or Iconify Ic Baseline, for example star.

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',
})

addCustomCommand

You can choose any icon from Material Design Icons or Iconify Ic Baseline, for example star.

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

import { removeCustomCommand } from '@vue/devtools-api'

// Remove a custom command by id
removeCustomCommand('vueuse')

onDevToolsClientConnected

import { onDevToolsClientConnected } from '@vue/devtools-api'

onDevToolsClientConnected(() => {
  console.log('devtools client connected')
})