### Monorepo Configuration Example

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/vite-plugin-api.md

Example configuration for a monorepo setup, specifying where to append the plugin and enabling the component inspector.

```typescript
VitePluginVueDevTools({
  appendTo: /src\/main\.(ts|js)$/,
  componentInspector: true,
  launchEditor: 'code',
})
```

--------------------------------

### Setup Vue DevTools Plugin with Configuration

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/configuration.md

Demonstrates how to set up a Vue DevTools plugin using `setupDevToolsPlugin`. This example includes detailed configuration for plugin settings like debug mode and log levels.

```typescript
import { setupDevToolsPlugin } from '@vue/devtools-kit'

setupDevToolsPlugin(
  {
    id: 'my-store-plugin',
    label: 'My Store',
    app: vueApp,
    packageName: 'my-store-package',
    homepage: 'https://example.com/my-store',
    logo: 'https://example.com/logo.svg',
    componentStateTypes: ['store', 'module'],
    enableEarlyProxy: true,
    settings: {
      debugMode: {
        type: 'boolean',
        label: 'Debug Mode',
        description: 'Enable debug logging',
        defaultValue: false,
      },
      logLevel: {
        type: 'choice',
        label: 'Log Level',
        defaultValue: 'warn',
        options: [
          { value: 'debug', label: 'Debug' },
          { value: 'warn', label: 'Warning' },
          { value: 'error', label: 'Error' },
        ],
        component: 'select',
      },
      customApiUrl: {
        type: 'text',
        label: 'API URL',
        defaultValue: 'https://api.example.com',
      },
    },
  },
  (api) => {
    // Plugin setup
  }
)
```

--------------------------------

### Console Output for DevTools URLs

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/vite-plugin-api.md

Example of the console output when the plugin starts, showing the DevTools client URL and the keyboard shortcut to toggle the overlay.

```bash
➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
```

--------------------------------

### PluginSetupFunction Example

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/types.md

Example of implementing a PluginSetupFunction. This snippet shows how to add a custom inspector using the provided API.

```typescript
const setupFn: PluginSetupFunction = (api) => {
  api.addInspector({
    id: 'my-inspector',
    label: 'My Inspector',
  })
}
```

--------------------------------

### Install Vue DevTools Globally (bun)

Source: https://github.com/vuejs/devtools/blob/main/docs/guide/standalone.md

Installs the Vue DevTools package globally using bun.

```sh
$ bun add -g @vue/devtools
```

--------------------------------

### Run Standalone DevTools

Source: https://github.com/vuejs/devtools/blob/main/docs/guide/standalone.md

Starts the standalone Vue DevTools application from a globally installed package.

```sh
vue-devtools
```

--------------------------------

### Integration Pattern: Basic Plugin Setup

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/utilities-and-integration.md

This pattern demonstrates how to set up a basic DevTools plugin. It involves using the `setupDevToolsPlugin` function, providing a descriptor for the plugin, and a setup function that receives the DevTools API. Within the setup function, you can register inspectors and listen for DevTools events.

```APIDOC
## Integration Patterns

### Pattern 1: Basic Plugin Setup

```typescript
import { setupDevToolsPlugin } from '@vue/devtools-kit'

export function setupMyPlugin(app) {
  setupDevToolsPlugin(
    {
      id: 'my-plugin',
      label: 'My Plugin',
      app,
    },
    (api) => {
      // Register inspector
      api.addInspector({
        id: 'my-inspector',
        label: 'My Data',
      })

      // Listen to tree requests
      api.on.getInspectorTree((payload) => {
        payload.rootNodes.push({
          id: 'root',
          label: 'Root',
        })
      })

      // Listen to state requests
      api.on.getInspectorState((payload) => {
        if (payload.nodeId === 'root') {
          payload.state = {
            data: [
              { key: 'value', value: 'example' },
            ],
          }
        }
      })
    }
  )
}
```
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/vuejs/devtools/blob/main/docs/help/contributing.md

Installs all necessary dependencies for the project using PNPM. Ensure Node.js v18.19+ and PNPM v10+ are installed.

```bash
pnpm i
```

--------------------------------

### Install DevTools API

Source: https://github.com/vuejs/devtools/blob/main/docs/plugins/api.md

Install the DevTools API package using your preferred package manager.

```sh
$ npm add -D @vue/devtools-api
```

```sh
$ pnpm add -D @vue/devtools-api
```

```sh
$ yarn add -D @vue/devtools-api
```

```sh
$ bun add -D @vue/devtools-api
```

--------------------------------

### Install Vue DevTools Locally (bun)

Source: https://github.com/vuejs/devtools/blob/main/docs/guide/standalone.md

Installs the Vue DevTools package as a development dependency using bun.

```sh
$ bun add -D @vue/devtools
```

--------------------------------

### Custom Port Configuration Example

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/vite-plugin-api.md

Example showing how the plugin automatically detects Vite server configuration for port and host. No manual configuration is needed.

```typescript
export default {
  server: {
    port: 3000,
    host: 'localhost',
  },
  plugins: [VitePluginVueDevTools()],
}
```

--------------------------------

### Basic Plugin Registration Pattern

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/INDEX.md

Example of how to register a basic DevTools plugin using `setupDevToolsPlugin`.

```APIDOC
## Pattern: Basic Plugin Registration

### Description
Demonstrates the fundamental setup for a custom DevTools plugin.

### Method
`setupDevToolsPlugin(descriptor, setupFn)`

### Parameters
#### Descriptor Object
- **id** (string) - Required - Unique identifier for the plugin.
- **label** (string) - Required - Display name for the plugin.
- **app** (object) - Required - The Vue application instance.

#### Setup Function (`setupFn`)
- **api** (object) - Provided by DevTools, contains methods to interact with the DevTools backend.
```

--------------------------------

### Complete DevTools Plugin Integration Example

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/hooks-and-context.md

A comprehensive example demonstrating how to set up a custom DevTools plugin, including listening to Vue app initialization, component lifecycle events, and adding custom inspectors and timeline layers.

```typescript
import { setupDevToolsPlugin, hook } from '@vue/devtools-kit'

export function setupMyPlugin(app) {
  // Listen to app initialization
  hook.on.vueAppInit((vueApp, version) => {
    console.log(`Vue ${version} app initialized`)
  })

  // Listen to component changes
  hook.on.componentAdded((app, uid, parentUid, component) => {
    console.log(`Component ${component.type.__name} mounted (uid: ${uid})`)
  })

  hook.on.componentUpdated((app, uid, parentUid, component) => {
    console.log(`Component ${component.type.__name} updated`)
  })

  hook.on.componentRemoved((app, uid, parentUid, component) => {
    console.log(`Component ${component.type.__name} unmounted`)
  })

  // Listen to events
  hook.on.componentEmit((app, instance, event, params) => {
    console.log(`Event: ${event}`, params)
  })

  // Set up DevTools plugin
  setupDevToolsPlugin(
    {
      id: 'my-plugin',
      label: 'My Plugin',
      app,
    },
    (api) => {
      // Add inspector
      api.addInspector({
        id: 'my-data',
        label: 'My Data',
      })

      // Listen to inspector requests
      api.on.getInspectorTree((payload) => {
        if (payload.inspectorId === 'my-data') {
          payload.rootNodes.push({
            id: 'root',
            label: 'Root',
            children: [],
          })
        }
      })

      api.on.getInspectorState((payload) => {
        if (payload.inspectorId === 'my-data' && payload.nodeId === 'root') {
          payload.state = {
            data: [
              { key: 'status', value: 'active' },
            ],
          }
        }
      })

      // Listen to timeline
      api.addTimelineLayer({
        id: 'events',
        label: 'Events',
        color: 0x4CAF50,
      })

      api.on.inspectTimelineEvent((payload) => {
        console.log('Timeline event:', payload.event.title)
      })
    }
  )
}
```

--------------------------------

### Run Standalone DevTools (Local Dependency)

Source: https://github.com/vuejs/devtools/blob/main/docs/guide/standalone.md

Starts the standalone Vue DevTools application when installed as a local project dependency.

```sh
./node_modules/.bin/vue-devtools
```

--------------------------------

### Example TimelineLayerOptions

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/types.md

An example of creating a TimelineLayerOptions object for logging API calls.

```typescript
const layer: TimelineLayerOptions = {
  id: 'api-calls',
  label: 'API Calls',
  color: 0x4CAF50,
  skipScreenshots: false,
}
```

--------------------------------

### Choice Plugin Setting Example

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/types.md

Example of a choice type setting for plugin configuration. Allows users to select from predefined options.

```typescript
{
  type: 'choice',
  label: 'Theme',
  defaultValue: 'light',
  options: [
    { value: 'light', label: 'Light' },
    { value: 'dark', label: 'Dark' }
  ],
  component: 'select'
}
```

--------------------------------

### Setup DevTools Plugin

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/devtools-kit-api.md

Sets up a DevTools plugin to add custom inspectors, timeline layers, and commands. Requires plugin metadata and a setup function that receives the DevToolsPluginAPI instance.

```typescript
import { setupDevToolsPlugin } from '@vue/devtools-kit'
import { createApp } from 'vue'

const app = createApp({})

setupDevToolsPlugin(
  {
    id: 'my-custom-plugin',
    label: 'My Plugin',
    app,
    packageName: 'my-package',
    homepage: 'https://example.com',
  },
  (api) => {
    // Add custom inspector
    api.addInspector({
      id: 'my-inspector',
      label: 'My Data',
    })

    // Listen for inspector tree requests
    api.on.getInspectorTree((payload) => {
      payload.rootNodes.push({
        id: 'root',
        label: 'Root Node',
      })
    })
  }
)
```

--------------------------------

### Install Vue DevTools Globally (pnpm)

Source: https://github.com/vuejs/devtools/blob/main/docs/guide/standalone.md

Installs the Vue DevTools package globally using pnpm.

```sh
$ pnpm add -g @vue/devtools
```

--------------------------------

### Custom Command Example

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/types.md

An example of how to define a custom command with an ID, title, icon, order, and an action. This command is configured to export data via a URL.

```typescript
const command: CustomCommand = {
  id: 'export-data',
  title: 'Export',
  icon: 'baseline-download',
  order: 10,
  action: {
    type: 'url',
    src: 'https://example.com/export',
  },
}
```

--------------------------------

### Run Playground

Source: https://github.com/vuejs/devtools/blob/main/docs/help/contributing.md

Starts the playground environment after building the project. This allows you to test the DevTools in a simulated environment.

```bash
pnpm play
```

--------------------------------

### Install Vue DevTools Globally (yarn)

Source: https://github.com/vuejs/devtools/blob/main/docs/guide/standalone.md

Installs the Vue DevTools package globally using yarn.

```sh
$ yarn global add @vue/devtools
```

--------------------------------

### Server-Side RPC Setup

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/vite-plugin-api.md

Internal setup for RPC channels using Birpc for client-server communication. This is automatically handled by the plugin.

```typescript
// Internal - automatically set up by plugin
createViteServerRpc(rpcFunctions)
setViteServerContext(server)
```

--------------------------------

### Example Usage of CreateRpcClientOptions

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/messaging-api.md

Demonstrates how to configure an RPC client with a specific preset and custom Birpc options, including timeout and an error handler.

```typescript
createRpcClient(functions, {
  preset: 'vite',
  options: {
    timeout: 5000,
    onError: (error) => console.error(error),
  },
})
```

--------------------------------

### Install Vue DevTools Globally (npm)

Source: https://github.com/vuejs/devtools/blob/main/docs/guide/standalone.md

Installs the Vue DevTools package globally using npm.

```sh
$ npm add -g @vue/devtools
```

--------------------------------

### Configure Electron Mirror

Source: https://github.com/vuejs/devtools/blob/main/docs/help/contributing.md

Sets the mirror for Electron downloads to ensure successful dependency installation in unstable network environments. Run this before `pnpm i`.

```bash
pnpm config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/
```

--------------------------------

### Install launch-editor-middleware for Webpack

Source: https://github.com/vuejs/devtools/blob/main/docs/getting-started/open-in-editor.md

Install the `launch-editor-middleware` package to enable the 'Open in Editor' feature with Webpack. This is a prerequisite for the following configuration steps.

```bash
npm install launch-editor-middleware
```

--------------------------------

### Text Plugin Setting Example

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/types.md

Example of a text input type setting for plugin configuration. Used for string-based inputs like API keys.

```typescript
{
  type: 'text',
  label: 'API Key',
  defaultValue: ''
}
```

--------------------------------

### Setup DevTools Plugin Hook

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/hooks-and-context.md

Called during the setup of a DevTools plugin. Logs the plugin's label.

```typescript
hook.setupDevToolsPlugin((descriptor, setupFn, options) => {
  console.log('Plugin setup:', descriptor.label)
})
```

--------------------------------

### Example TimelineEvent

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/types.md

An example of how to instantiate a TimelineEvent object with specific data for API response logging.

```typescript
const event: TimelineEvent = {
  time: Date.now(),
  title: 'API Response',
  subtitle: 'Fetched user data',
  data: { userId: 123, name: 'John' },
  logType: 'default',
}
```

--------------------------------

### setupDevToolsPlugin

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/devtools-kit-api.md

Sets up a DevTools plugin that can add custom inspectors, timeline layers, and commands. It takes a plugin descriptor and a setup function that receives the DevToolsPluginAPI instance.

```APIDOC
## setupDevToolsPlugin

### Description
Sets up a DevTools plugin that can add custom inspectors, timeline layers, and commands.

### Signature
```typescript
function setupDevToolsPlugin(
  pluginDescriptor: PluginDescriptor,
  setupFn: PluginSetupFunction
): void
```

### Parameters
#### Parameters
- **pluginDescriptor** (`PluginDescriptor`) - Required - Plugin metadata and configuration
- **setupFn** (`PluginSetupFunction`) - Required - Setup function that receives the DevToolsPluginAPI instance

### Returns
`void`

### Example
```typescript
import { setupDevToolsPlugin } from '@vue/devtools-kit'
import { createApp } from 'vue'

const app = createApp({})

setupDevToolsPlugin(
  {
    id: 'my-custom-plugin',
    label: 'My Plugin',
    app,
    packageName: 'my-package',
    homepage: 'https://example.com',
  },
  (api) => {
    // Add custom inspector
    api.addInspector({
      id: 'my-inspector',
      label: 'My Data',
    })

    // Listen for inspector tree requests
    api.on.getInspectorTree((payload) => {
      payload.rootNodes.push({
        id: 'root',
        label: 'Root Node',
      })
    })
  }
)
```
```

--------------------------------

### Example Usage of VitePluginVueDevTools

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/vite-plugin-api.md

Demonstrates how to use the VitePluginVueDevTools factory function with specific options for component inspector and editor launch.

```typescript
import VitePluginVueDevTools from 'vite-plugin-vue-devtools'

export default {
  plugins: [
    VitePluginVueDevTools({
      componentInspector: true,
      launchEditor: 'code',
    }),
  ],
}
```

--------------------------------

### Install Vue DevTools Locally (pnpm)

Source: https://github.com/vuejs/devtools/blob/main/docs/guide/standalone.md

Installs the Vue DevTools package as a development dependency using pnpm.

```sh
$ pnpm add -D @vue/devtools
```

--------------------------------

### Install Vue DevTools Locally (yarn)

Source: https://github.com/vuejs/devtools/blob/main/docs/guide/standalone.md

Installs the Vue DevTools package as a development dependency using yarn.

```sh
$ yarn add -D @vue/devtools
```

--------------------------------

### setupDevtoolsPlugin

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/hooks-and-context.md

Hook called during the setup of a DevTools plugin. It logs the label of the plugin being set up.

```APIDOC
## setupDevtoolsPlugin

### Description
Called when a DevTools plugin is being set up. Logs the label of the plugin being set up.

### Callback Parameters
- **descriptor** (`PluginDescriptor`) - Plugin metadata
- **setupFn** (`PluginSetupFunction`) - Plugin setup function
- **options** (`{ target?: string }`) - Setup options

### Return
`void`
```

--------------------------------

### Install vite-plugin-vue-devtools with bun

Source: https://github.com/vuejs/devtools/blob/main/docs/guide/vite-plugin.md

Use this command to add the Vite plugin as a development dependency using bun.

```sh
$ bun add -D vite-plugin-vue-devtools
```

--------------------------------

### InspectorNodeTag Example

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/types.md

An example of creating an InspectorNodeTag object with a label, text color, background color, and tooltip.

```typescript
const tag: InspectorNodeTag = {
  label: 'Async',
  textColor: 0xFFFFFF,
  backgroundColor: 0xFF6B6B,
  tooltip: 'Async loading state',
}
```

--------------------------------

### Install Vue DevTools Locally (npm)

Source: https://github.com/vuejs/devtools/blob/main/docs/guide/standalone.md

Installs the Vue DevTools package as a development dependency using npm.

```sh
$ npm add -D @vue/devtools
```

--------------------------------

### perfStart

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/hooks-and-context.md

Hook called when performance profiling starts. It logs the type and timestamp of the profiling session.

```APIDOC
## perfStart

### Description
Called when performance profiling starts. Logs the type and timestamp of the profiling session.

### Callback Parameters
- **app** (`App`) - Vue application instance
- **uid** (`number`) - Component instance ID
- **vm** (`ComponentInstance`) - Component instance
- **type** (`string`) - Profile type (e.g., 'render', 'patch')
- **time** (`number`) - Timestamp in milliseconds

### Return
`void`
```

--------------------------------

### Boolean Plugin Setting Example

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/types.md

Example of a boolean type setting for plugin configuration. Used to enable or disable features.

```typescript
{
  type: 'boolean',
  label: 'Enable Feature',
  description: 'Turn on awesome feature',
  defaultValue: true
}
```

--------------------------------

### CustomTab Example

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/types.md

Example of defining a custom tab. This snippet illustrates how to configure a tab with an iframe view and assign it to the 'modules' category.

```typescript
const tab: CustomTab = {
  name: 'my-tab',
  title: 'Dashboard',
  icon: 'baseline-dashboard',
  view: {
    type: 'iframe',
    src: 'https://example.com/dashboard',
    persistent: true,
  },
  category: 'modules',
}
```

--------------------------------

### Initialize DevTools

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/devtools-kit-api.md

Initializes the DevTools hook system. This should be called once during application setup.

```typescript
devtools.init(): void
```

```typescript
import { devtools } from '@vue/devtools-kit'

devtools.init()
```

--------------------------------

### Vue App Setup and Rendering in Iframe

Source: https://github.com/vuejs/devtools/blob/main/packages/playground/multi-app/src/components/Iframe/srcdoc.html

This snippet shows the import of Vue, the creation of a Vue application instance, and its rendering logic within an iframe. It includes a counter and a button to increment it.

```javascript
import { createApp, h, ref } from 'vue'

const app = createApp({
  setup() {
    const counter = ref(0)
    return {
      counter,
    }
  },
  render(ctx) {
    return h(
      'div',
      {
        style: {
          color: 'black',
          display: 'flex',
          'flex-wrap': 'wrap',
          'justify-content': 'center',
          'align-items': 'center',
          height: '100vh',
        },
      },
      h('h1', { style: { width: '100%' } }, 'App3 in iframe'),
      h('count', `${ctx.counter}`),
      h('div', h('button', { onClick: () => ctx.counter++ }, '++')),
    )
  },
}).mount('#app')
```

--------------------------------

### Custom Inspector State Example

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/types.md

An example demonstrating how to structure state data for a custom inspector. It shows state grouped by 'props' and 'computed' properties, with key-value pairs for each state item.

```typescript
const state: CustomInspectorState = {
  props: [
    { key: 'count', value: 42 },
    { key: 'title', value: 'Hello' },
  ],
  computed: [
    { key: 'doubled', value: 84, objectType: 'computed' },
  ],
}
```

--------------------------------

### Create RPC Client with Extension Preset

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/messaging-api.md

Initializes an RPC client using the 'extension' preset for communication within browser extensions (Chrome/Firefox). Requires context setup with `setExtensionClientContext`.

```typescript
createRpcClient(functions, {
  preset: 'extension',
})
```

--------------------------------

### Install vite-plugin-vue-devtools with pnpm

Source: https://github.com/vuejs/devtools/blob/main/docs/guide/vite-plugin.md

Use this command to add the Vite plugin as a development dependency using pnpm.

```sh
$ pnpm add -D vite-plugin-vue-devtools
```

--------------------------------

### Install vite-plugin-vue-devtools with npm

Source: https://github.com/vuejs/devtools/blob/main/docs/guide/vite-plugin.md

Use this command to add the Vite plugin as a development dependency using npm.

```sh
$ npm add -D vite-plugin-vue-devtools
```

--------------------------------

### Install vite-plugin-vue-devtools with yarn

Source: https://github.com/vuejs/devtools/blob/main/docs/guide/vite-plugin.md

Use this command to add the Vite plugin as a development dependency using yarn.

```sh
$ yarn add -D vite-plugin-vue-devtools
```

--------------------------------

### Recording Timeline Events Pattern

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/INDEX.md

Example of how to add custom layers and events to the DevTools timeline.

```APIDOC
## Pattern: Recording Timeline Events

### Description
Illustrates how to create custom layers and log events in the DevTools timeline.

### Methods
- `api.addTimelineLayer(options)`
- `api.addTimelineEvent(eventData)`

### Parameters
#### `addTimelineLayer` Options
- **id** (string) - Required - Unique identifier for the layer.
- **label** (string) - Required - Display name for the layer.
- **color** (number) - Optional - Color for the layer (e.g., hex color code).

#### `addTimelineEvent` Event Data
- **layerId** (string) - Required - The ID of the layer to add the event to.
- **event** (object) - Required - The event details.
  - **time** (number) - Required - Timestamp of the event.
  - **title** (string) - Required - Title of the event.
  - **data** (object) - Optional - Additional data associated with the event.
```

--------------------------------

### Start Performance Profiling Hook

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/hooks-and-context.md

Called when performance profiling begins. Logs the type and time of the profiling session.

```typescript
hook.on.perfStart((app, uid, vm, type, time) => {
  console.log('Performance tracking started')
  console.log('Type:', type)
  console.log('Time:', time)
})
```

--------------------------------

### Adding Custom Tab Pattern

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/INDEX.md

Example of how to add a custom tab to the DevTools UI using `addCustomTab`.

```APIDOC
## Pattern: Adding Custom Tab

### Description
Shows how to integrate a custom tab into the Vue DevTools interface.

### Method
`addCustomTab(tab)`

### Parameters
#### Tab Object
- **name** (string) - Required - Internal name for the tab.
- **title** (string) - Required - Display name for the tab.
- **view** (object) - Required - Configuration for the tab's view.
  - **type** (string) - Required - Type of view, e.g., 'iframe'.
  - **src** (string) - Required - URL for the iframe source.
```

--------------------------------

### Example of Type-Safe Remote Calls

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/messaging-api.md

Shows how to use the `rpc` object returned by `createRpcClient` to make type-safe asynchronous calls to remote functions.

```typescript
const rpc = createRpcClient(...)
await rpc.getComponentTree()
await rpc.updateState({ id: '123', value: newValue })
```

--------------------------------

### Create RPC Client with Broadcast Preset

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/messaging-api.md

Initializes an RPC client using the 'broadcast' preset for cross-window/tab communication via the BroadcastChannel API. This is useful for multi-window DevTools setups.

```typescript
createRpcClient(functions, {
  preset: 'broadcast',
})
```

--------------------------------

### Listening to Vue Lifecycle Hooks Pattern

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/INDEX.md

Example of how to subscribe to Vue component lifecycle events using the `hook` object.

```APIDOC
## Pattern: Listening to Vue Lifecycle Hooks

### Description
Shows how to use the `hook` object to listen for Vue component lifecycle events.

### Method
`hook.on.<eventName>(callback)`

### Events
- `componentAdded(app, uid, parentUid, component)`
- `componentUpdated(app, uid, parentUid, component)`

### Parameters
#### Callback Function Arguments
- **app** (object) - The Vue application instance.
- **uid** (number) - The unique ID of the component.
- **parentUid** (number) - The unique ID of the parent component.
- **component** (object) - The component instance.
```

--------------------------------

### Vite Plugin for Vue Devtools Setup

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/messaging-api.md

Configuration for the Vite plugin that automatically sets up the RPC server and client for Vue Devtools during development.

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import VitePluginVueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [VitePluginVueDevTools()],
})

// Plugin automatically sets up RPC:
// - Server: createRpcServer() at startup
// - Client: createRpcClient() in browser
```

--------------------------------

### Component Inspector Customization

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/vite-plugin-api.md

Example of configuring the component inspector with advanced options, including changing the toggle shortcut, log owner name, and showing messages.

```typescript
VitePluginVueDevTools({
  componentInspector: {
    toggleComboKey: 'meta-shift-d',
    hideConsoleLogsInTools: false,
    logOwnerName: true,
    showCannotInspectMessage: true,
  },
})
```

--------------------------------

### Initializing and Using DevTools Global Object

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/utilities-and-integration.md

The `devtools` object offers a convenient namespace for initializing DevTools and accessing its context and API. Use `devtools.init()` to start DevTools and `devtools.hook` to listen for events.

```typescript
import { devtools } from '@vue/devtools-kit'

// Initialize DevTools
devtools.init()

// Access context
const state = devtools.ctx.state
const hooks = devtools.ctx.hooks

// Access API
const api = devtools.api
```

```typescript
import { devtools } from '@vue/devtools-kit'

// In your app startup
devtools.init()

// Listen to app init
devtools.hook.on.vueAppInit((app, version) => {
  console.log('App version:', version)
})

// Check if connected
if (devtools.ctx.state.connected) {
  console.log('DevTools connected!')
}
```

--------------------------------

### Create RPC Server with WebSocket Preset

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/messaging-api.md

Initializes an RPC server using the 'ws' preset for direct WebSocket communication. Ensure `setWsServerContext` is configured with the WebSocket server instance.

```typescript
createRpcServer(functions, {
  preset: 'ws',
})
```

--------------------------------

### Create RPC Server with Vite Preset

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/messaging-api.md

Initializes an RPC server using the 'vite' preset for handling communication within a Vite development server. Ensure `setViteServerContext` is configured.

```typescript
createRpcServer(functions, {
  preset: 'vite',
})
```

--------------------------------

### Build Project

Source: https://github.com/vuejs/devtools/blob/main/docs/help/contributing.md

Builds the project for production or distribution. This command compiles the project's assets and code.

```bash
pnpm build
```

--------------------------------

### Create RPC Client with WebSocket Preset

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/messaging-api.md

Initializes an RPC client using the 'ws' preset for direct WebSocket communication. Requires `setWsClientContext` to be configured with the server URL.

```typescript
createRpcClient(functions, {
  preset: 'ws',
})
```

--------------------------------

### Get Component Bounds

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/devtools-kit-api.md

Gets the DOM bounding box (position and dimensions) for a specific Vue component instance. This is an asynchronous operation.

```typescript
const bounds = await api.getComponentBounds(instance)
console.log(`Component at ${bounds.left}, ${bounds.top}`)
```

--------------------------------

### Setting Up a Basic DevTools Plugin

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/utilities-and-integration.md

Integrate custom functionality into DevTools by setting up a plugin. This involves registering inspectors, listening for tree and state requests, and defining custom data.

```typescript
import { setupDevToolsPlugin } from '@vue/devtools-kit'

export function setupMyPlugin(app) {
  setupDevToolsPlugin(
    {
      id: 'my-plugin',
      label: 'My Plugin',
      app,
    },
    (api) => {
      // Register inspector
      api.addInspector({
        id: 'my-inspector',
        label: 'My Data',
      })

      // Listen to tree requests
      api.on.getInspectorTree((payload) => {
        payload.rootNodes.push({
          id: 'root',
          label: 'Root',
        })
      })

      // Listen to state requests
      api.on.getInspectorState((payload) => {
        if (payload.nodeId === 'root') {
          payload.state = {
            data: [
              { key: 'value', value: 'example' },
            ],
          }
        }
      })
    }
  )
}
```

--------------------------------

### Create RPC Proxy with Extension Preset

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/messaging-api.md

Initializes an RPC proxy using the 'extension' preset for facilitating communication in browser extension environments. Ensure `setExtensionProxyContext` is configured.

```typescript
createRpcProxy({
  preset: 'extension',
})
```

--------------------------------

### Plugin Lifecycle - Server Configuration

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/vite-plugin-api.md

Illustrates the `configureServer` hook for setting up middleware, RPC server, HMR, and file watching.

```typescript
configureServer(server)
```

--------------------------------

### Basic Plugin Registration

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/INDEX.md

Register a custom DevTools plugin using `setupDevToolsPlugin`. This is the entry point for creating custom functionality.

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

export function install(app) {
  setupDevToolsPlugin(
    {
      id: 'my-plugin',
      label: 'My Plugin',
      app,
    },
    (api) => {
      // Configure plugin
    }
  )
}
```

--------------------------------

### Create RPC Proxy with Electron Preset

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/messaging-api.md

Initializes an RPC proxy using the 'electron' preset for facilitating communication in an Electron environment. Ensure `setElectronProxyContext` is configured.

```typescript
createRpcProxy({
  preset: 'electron',
})
```

--------------------------------

### hook Object - Available Hooks

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/utilities-and-integration.md

The `hook` object provides access to Vue app lifecycle hooks and DevTools setup functions. You can subscribe to various events like `vueAppInit`, `componentAdded`, `componentUpdated`, and more. It also allows for plugin setup using `setupDevToolsPlugin`.

```APIDOC
## hook Object

Access to Vue app lifecycle hooks and DevTools setup.

### Available Hooks:

| Hook |
|---| 
| vueAppInit | 
| vueAppUnmount | 
| vueAppConnected | 
| componentAdded | 
| componentUpdated | 
| componentRemoved | 
| componentEmit | 
| perfStart | 
| perfEnd | 
| setupDevtoolsPlugin | 

### Example Usage:

```typescript
import { hook } from '@vue/devtools-kit'

hook.on.vueAppInit((app, version, types) => {
  console.log('Vue app initialized:', app)
})

hook.setupDevToolsPlugin(descriptor, setupFn)
```
```

--------------------------------

### Create RPC Client with Electron Preset

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/messaging-api.md

Initializes an RPC client using the 'electron' preset for communication within an Electron-based DevTools application. Requires `setElectronClientContext` to be called.

```typescript
createRpcClient(functions, {
  preset: 'electron',
})
```

--------------------------------

### vueAppInit

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/hooks-and-context.md

Called when a Vue app initializes. It provides the app instance, version, and available types.

```APIDOC
## vueAppInit

### Description
Called when a Vue app initializes.

### Callback Parameters
- **app** (`App`) - Vue application instance
- **version** (`string`) - Vue version (e.g., '3.4.0')
- **types** (`Record<string, string | symbol>`) - Vue internal component types

### Return
`void | Promise<void>`
```

--------------------------------

### Custom RPC Server and Client Implementation

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/messaging-api.md

Demonstrates a custom implementation of both the RPC server and client using `@vue/devtools-kit`, including defining server methods and client callbacks.

```typescript
import { createRpcClient, createRpcServer } from '@vue/devtools-kit'

// Server
createRpcServer({
  getState: async () => ({
    connected: true,
    version: '7.0',
  }),
  updateState: async (newState) => {
    console.log('State updated:', newState)
  },
}, {
  preset: 'vite',
})

// Client
const rpc = createRpcClient({
  onStateUpdate: (state) => {
    console.log('Received state:', state)
  },
}, {
  preset: 'vite',
})

// Call remote function
const state = await rpc.getState()
```

--------------------------------

### Get Component Name

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/devtools-kit-api.md

Retrieves the display name of a Vue component instance. Requires an instance of `ComponentInstance`.

```typescript
function getComponentName(instance: ComponentInstance): Promise<string>
```

```typescript
const name = await api.getComponentName(instance)
console.log(`Component name: ${name}`)
```

--------------------------------

### Plugin Lifecycle - Pre Hook

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/vite-plugin-api.md

Demonstrates the 'pre' enforcement and 'serve' apply for the plugin's pre hook, indicating it runs early in the Vite pipeline.

```typescript
enforce: 'pre'
apply: 'serve'
```

--------------------------------

### getComponentInstances

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/devtools-kit-api.md

Gets all Vue component instances in the application. This is useful for inspecting or interacting with all components currently rendered.

```APIDOC
## getComponentInstances

### Description
Gets all Vue component instances in the application.

### Method
Not specified (likely internal function call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **app** (`App`) - Required - Vue application instance

### Returns
`Promise<ComponentInstance[]>`

### Example
```typescript
const instances = await api.getComponentInstances(app)
```
```

--------------------------------

### now

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/devtools-kit-api.md

Gets the current timestamp for timeline events. This is a utility function to ensure consistent timing for recorded events.

```APIDOC
## now

### Description
Gets the current timestamp for timeline events.

### Method
Not specified (likely internal function call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Returns
`number` - Current timestamp in milliseconds

### Example
```typescript
const timestamp = api.now()
api.addTimelineEvent({
  layerId: 'my-events',
  event: {
    time: timestamp,
    data: {},
  },
})
```
```

--------------------------------

### Create RPC Server with Broadcast Preset

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/messaging-api.md

Initializes an RPC server using the 'broadcast' preset to handle communication across different browser windows or tabs using the BroadcastChannel API.

```typescript
createRpcServer(functions, {
  preset: 'broadcast',
})
```

--------------------------------

### Get Component Instances

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/devtools-kit-api.md

Retrieves all Vue component instances within a given Vue application. This is an asynchronous operation.

```typescript
const instances = await api.getComponentInstances(app)
```

--------------------------------

### Import and Connect DevTools (Local Dependency)

Source: https://github.com/vuejs/devtools/blob/main/docs/guide/standalone.md

Imports the DevTools and connects to the host and port, typically used in development environments.

```ts
import { devtools } from '@vue/devtools'

if (process.env.NODE_ENV === 'development')
  devtools.connect(/* host (the default is "http://localhost"), port (the default is 8090) */)
```

--------------------------------

### Get Plugin Settings

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/devtools-kit-api.md

Retrieves plugin settings defined in the plugin descriptor. Access specific settings by their key.

```typescript
const settings = api.getSettings()
console.log(settings.debugMode) // Access a boolean setting
```

--------------------------------

### Handle Vue App Initialization

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/hooks-and-context.md

Listen for the `vueAppInit` hook to execute logic when a Vue application initializes. This hook provides access to the app instance, version, and internal types.

```typescript
hook.on.vueAppInit((app, version, types) => {
  console.log('Vue app initialized')
  console.log('Version:', version)
  console.log('Available types:', types)
})
```

--------------------------------

### Get Current Timestamp

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/devtools-kit-api.md

Retrieves the current timestamp in milliseconds, useful for accurately logging event times in the timeline.

```typescript
const timestamp = api.now()
api.addTimelineEvent({
  layerId: 'my-events',
  event: {
    time: timestamp,
    data: {},
  },
})
```

--------------------------------

### Build Project with Watch Mode

Source: https://github.com/vuejs/devtools/blob/main/docs/help/contributing.md

Builds the project and enables watch mode for continuous development. This command is useful for making and testing changes iteratively.

```bash
pnpm dev
```

--------------------------------

### Minimal VitePluginVueDevTools Configuration

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/vite-plugin-api.md

Shows the simplest way to configure the plugin by calling the factory function without any options.

```typescript
VitePluginVueDevTools()
```

--------------------------------

### Get Vite RPC Client

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/messaging-api.md

Retrieves the Vite-specific RPC client instance. This is used for establishing communication with Vite-integrated services.

```typescript
import { getViteRpcClient } from '@vue/devtools-kit'

const viteRpc = getViteRpcClient()
```

--------------------------------

### Create RPC Client Instance

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/messaging-api.md

Creates an RPC client for calling server functions. Use this to initiate communication from the client side to the server.

```typescript
import { createRpcClient } from '@vue/devtools-kit'

const rpc = createRpcClient(
  {
    // Local functions
    onStateChange: (newState) => {
      console.log('State changed:', newState)
    },
  },
  {
    preset: 'vite',
    options: { timeout: 5000 },
  }
)

// Call server function
await rpc.getComponentTree({ inspectorId: 'components' })
```

--------------------------------

### getComponentBounds

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/devtools-kit-api.md

Gets the DOM bounding box for a component instance. This provides positional and dimensional information about a component's rendered element.

```APIDOC
## getComponentBounds

### Description
Gets the DOM bounding box for a component instance.

### Method
Not specified (likely internal function call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **instance** (`ComponentInstance`) - Required - Vue component instance

### Returns
`Promise<ComponentBounds>` - Object with left, top, width, height

### Example
```typescript
const bounds = await api.getComponentBounds(instance)
console.log(`Component at ${bounds.left}, ${bounds.top}`)
```
```

--------------------------------

### Create RPC Server Instance

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/messaging-api.md

Creates an RPC server to handle incoming client calls. This is used on the server side to expose functions to clients.

```typescript
import { createRpcServer } from '@vue/devtools-kit'

createRpcServer(
  {
    // Server functions
    getAppState: async () => {
      return { connected: true, version: '7.0' }
    },
    updateSettings: async (settings) => {
      console.log('Settings updated:', settings)
    },
  },
  {
    preset: 'vite',
  }
)
```

--------------------------------

### getViteRpcServer

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/messaging-api.md

Gets the Vite-specific RPC server instance. This function is used to set up a server for handling RPC requests in a Vite environment.

```APIDOC
## getViteRpcServer

### Description
Gets the Vite-specific RPC server instance.

### Signature
```typescript
function getViteRpcServer<R, L extends object = Record<string, never>>(): BirpcGroup<R, L>
```

### Example
```typescript
import { getViteRpcServer } from '@vue/devtools-kit'

const server = getViteRpcServer()
```
```

--------------------------------

### Create RPC Client with Iframe Preset

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/messaging-api.md

Initializes an RPC client using the 'iframe' preset for communication with DevTools embedded in an iframe. Ensure the context is set using `setIframeServerContext`.

```typescript
createRpcClient(functions, {
  preset: 'iframe',
})
```

--------------------------------

### getViteRpcClient

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/messaging-api.md

Gets the Vite-specific RPC client instance. This function is used to establish a client connection for RPC communication in a Vite environment.

```APIDOC
## getViteRpcClient

### Description
Gets the Vite-specific RPC client instance.

### Signature
```typescript
function getViteRpcClient<R, L extends object = Record<string, never>>(): BirpcReturn<R, L>
```

### Example
```typescript
import { getViteRpcClient } from '@vue/devtools-kit'

const viteRpc = getViteRpcClient()
```
```

--------------------------------

### PluginSetupFunction

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/types.md

Function type for plugin initialization. This function is called when a plugin is set up, providing access to the DevTools API for registering components and listeners.

```APIDOC
## PluginSetupFunction

### Description
Function type for plugin initialization.

### Parameters
- **api** (`DevToolsPluginAPI`) - Plugin API instance for registering inspectors and events

### Example
```typescript
const setupFn: PluginSetupFunction = (api) => {
  api.addInspector({
    id: 'my-inspector',
    label: 'My Inspector',
  })
}
```
```

--------------------------------

### getSettings

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/devtools-kit-api.md

Retrieves plugin settings configured in the plugin descriptor. Allows access to configuration values defined for a specific plugin.

```APIDOC
## getSettings

### Description
Retrieves plugin settings configured in the plugin descriptor.

### Method
Not specified (likely internal function call)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **pluginId** (`string | undefined`) - Optional - Plugin ID (uses plugin descriptor ID if undefined)

### Returns
`Record<string, any>` - Settings object

### Example
```typescript
const settings = api.getSettings()
console.log(settings.debugMode) // Access a boolean setting
```
```

--------------------------------

### Create Configurable Plugins with Settings in Vue DevTools

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/utilities-and-integration.md

Enables the creation of plugins with user-configurable settings directly within Vue DevTools. It demonstrates how to define settings, access their values, and react to changes. Requires importing `setupDevToolsPlugin` from '@vue/devtools-kit'.

```typescript
import { setupDevToolsPlugin } from '@vue/devtools-kit'

export function setupPluginWithSettings(app) {
  setupDevToolsPlugin(
    {
      id: 'configurable-plugin',
      label: 'Configurable Plugin',
      app,
      settings: {
        enabled: {
          type: 'boolean',
          label: 'Enable Plugin',
          defaultValue: true,
        },
      },
    },
    (api) => {
      const settings = api.getSettings()

      if (settings.enabled) {
        api.addInspector({
          id: 'data',
          label: 'Data',
        })
      }

      // Listen for setting changes
      api.on.setPluginSettings(({ key, value }) => {
        if (key === 'enabled') {
          // React to setting change
          console.log('Plugin enabled:', value)
        }
      })
    }
  )
}
```

--------------------------------

### devtools.init

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/devtools-kit-api.md

Initializes the DevTools hook system, preparing it to receive and process information from the Vue application.

```APIDOC
## devtools.init

### Description
Initializes the DevTools hook system.

### Method
`devtools.init(): void`

### Request Example
```typescript
import { devtools } from '@vue/devtools-kit'

devtools.init()
```
```

--------------------------------

### Get Inspector State Value Type

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/utilities-and-integration.md

Determines the type of a value for inspector display. Useful for categorizing and rendering state properties correctly.

```typescript
import { getInspectorStateValueType } from '@vue/devtools-kit'

getInspectorStateValueType(42)              // "number"
getInspectorStateValueType("hello")         // "string"
getInspectorStateValueType({ a: 1 })        // "Object"
getInspectorStateValueType([1, 2, 3])       // "Array"
getInspectorStateValueType(new Map())       // "Map"
getInspectorStateValueType(new Set())       // "Set"
getInspectorStateValueType(() => {})
// "Function"
```

--------------------------------

### Get Vite RPC Server

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/messaging-api.md

Retrieves the Vite-specific RPC server instance. This is used for handling incoming RPC requests in a Vite environment.

```typescript
import { getViteRpcServer } from '@vue/devtools-kit'

const server = getViteRpcServer()
```

--------------------------------

### Add Simple Custom Command

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/configuration.md

Register a basic custom command with an ID, title, description, icon, and an action that opens a URL. Commands are sorted by the `order` property.

```typescript
import { addCustomCommand } from '@vue/devtools-kit'

// Simple command
addCustomCommand({
  id: 'open-docs',
  title: 'Documentation',
  description: 'Open project documentation',
  icon: 'baseline-help',
  order: 10,
  action: {
    type: 'url',
    src: 'https://docs.example.com',
  },
})
```

--------------------------------

### Conditional Component Event Logging

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/hooks-and-context.md

An example of using the `componentEmit` hook to log specific events, such as 'update:modelValue', providing targeted debugging information.

```typescript
hook.on.componentEmit((app, instance, event, params) => {
  if (event === 'update:modelValue') {
    console.log('Component updated value:', params)
  }
})
```

--------------------------------

### Get Raw Value

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/devtools-kit-api.md

Retrieves the underlying raw value from reactive wrappers like `ref`, `computed`, or other reactive proxies. Accepts any value type.

```typescript
function getRaw(value: any): any
```

--------------------------------

### Get Component Inspector Instance

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/utilities-and-integration.md

Asynchronously retrieves the Vue component inspector instance. Use this to enable inspector features or open components in the editor.

```typescript
import { getComponentInspector } from '@vue/devtools-kit'

const inspector = await getComponentInspector()

// Use inspector
inspector.enable()
inspector.openInEditor(
  'http://localhost:5173',
  'src/components/Button.vue',
  10,
  5
)
```

--------------------------------

### Create RPC Client with Vite Preset

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/messaging-api.md

Initializes an RPC client using the 'vite' preset, suitable for Vite development server integration. This is the default for `vite-plugin-vue-devtools` and requires `setViteClientContext`.

```typescript
createRpcClient(functions, {
  preset: 'vite',
})
```

--------------------------------

### Get Inspector Tree Hook

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/hooks-and-context.md

Called when the inspector requests the component or data tree. Adds a root node if the inspector ID matches 'my-inspector'.

```typescript
api.on.getInspectorTree((payload) => {
  if (payload.inspectorId === 'my-inspector') {
    payload.rootNodes.push({
      id: 'root',
      label: 'Root Node',
      children: [],
    })
  }
})
```

--------------------------------

### Get Global RPC Server Instance

Source: https://github.com/vuejs/devtools/blob/main/_autodocs/messaging-api.md

Retrieves the globally accessible RPC server instance. This is useful for accessing server functionalities that have been exposed globally.

```typescript
import { getRpcServer } from '@vue/devtools-kit'

const server = getRpcServer()
```