Plugins API

Plugins API for easier DevTools integrations.

Compatibility

Vue DevTools v9 continues to provide the v6-style plugin setup API for its supported custom inspectors, component hooks, timeline layers and plugin settings.

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

setupDevToolsPlugin

Register a Vue DevTools plugin with its descriptor and setup callback:

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

setupDevToolsPlugin(
  {
    id: 'example',
    label: 'Example',
    app,
  },
  (api) => {
    api.addInspector({
      id: 'example',
      label: 'Example',
    })
  },
)

The legacy setupDevtoolsPlugin spelling remains available as an alias.

Connection lifecycle

Use onDevToolsConnected when the runtime is ready, or onDevToolsClientConnected when a DevTools UI client is also attached:

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

onDevToolsConnected(() => {
  console.log('devtools runtime connected')
})

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

Importing @vue/devtools-api during SSR is safe. Its Node export intentionally performs no browser work.

APIs removed in v9

Breaking change

The following Vue-level APIs were available in Vue DevTools v8 but are deprecated and no longer exported in Vue DevTools v9.

Removed API	v9 replacement
addCustomTab	Register an iframe, custom-render, json-render, or another dock entry with ctx.docks.register(). See the Dock System documentation.
addCustomCommand	Register a command with ctx.commands.register(). See the Commands & Command Palette documentation.
removeCustomCommand	Keep the handle returned by ctx.commands.register() and call handle.unregister(). See the Command Handle documentation.

These replacements live on the Devframe-based Vite DevTools Kit integration surface. For the underlying framework-neutral dock and command registries, see the Devframe Hub documentation.