### Integrating Devtools Setup into Vue Plugin install Method

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This example demonstrates the typical integration of the `setupDevtools` function within a standard Vue plugin's `install` method. It ensures that the Devtools plugin is initialized when the Vue plugin is installed on an application.

```js
import { setupDevtools } from './devtools'

export default {
  install (app, options = {}) {
    // Our Vue plugin logic

    setupDevtools(app)
  }
}
```

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

### Start Development Server for Vue Application

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/guide/installation.md

These commands are examples of how to start a development server for your Vue application. The development server must run in parallel with the `vue-devtools` command for debugging to function correctly.

```bash
yarn dev
#or
yarn serve
```

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

### Install Project Dependencies

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/dev/README.md

Installs all necessary project dependencies using Yarn, preparing the project for development or production tasks.

```Bash
yarn install
```

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

### Exporting Basic Vue Devtools Plugin Setup Function

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This code defines and exports a basic `setupDevtools` function. This function serves as an entry point for your Vue Devtools plugin, encapsulating the `setupDevtoolsPlugin` call.

```js
export function setupDevtools () {
  setupDevtoolsPlugin({ /* Options... */}, api => {
    // Logic...
  })
}
```

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

### Install Rollup and Bundling Plugins

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This command installs Rollup and a set of essential plugins as development dependencies. These tools are used for bundling the plugin, compiling .vue files, converting CommonJS modules, resolving node modules, replacing environment variables, and minifying the output for production.

```bash
yarn add -D rollup rollup-plugin-vue @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-replace rollup-plugin-terser pascalcase rimraf
```

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

### Set up Vue Devtools Documentation Development

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/guide/contributing.md

This snippet provides the shell commands to initialize and run the local development server for the Vue Devtools project's documentation. It involves navigating to the project root, installing dependencies, and starting the documentation server.

```Shell
cd devtools
yarn install
yarn docs:dev
```

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

### Example package.json for JavaScript Plugin

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This package.json example demonstrates the basic configuration for a JavaScript-based Vue Devtools plugin. It includes @vue/devtools-api as a direct dependency and specifies vue as a peer dependency to ensure compatibility with the user's Vue version.

```json
{
  "name": "my-awesome-plugin",
  "version": "0.0.0",
  "main": "dist/index.js",
  "dependencies": {
    "@vue/devtools-api": "^6.0.0-beta.14"
  },
  "peerDependencies": {
    "vue": "^3.1.0"
  },
  "devDependencies": {
    "vue": "^3.1.0"
  }
}
```

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

### Set up Vue Devtools Development Environment

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/guide/contributing.md

This snippet outlines the steps to clone the Vue Devtools repository, install its dependencies, and start the core development servers. It requires running the build watcher and the Vue 3 development shell in separate terminals for active development.

```Shell
git clone https://github.com/vuejs/devtools
yarn install
# In terminal 1:
yarn run build:watch
# In terminal 2 (after initial compilation finishes):
yarn run dev:vue3
```

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

### Structure Vue Devtools Plugin Setup Function

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This snippet outlines the basic structure of the `setupDevtools` function, which initializes the Vue Devtools plugin. It shows how to capture the `devtoolsApi` and return a `devtools` object containing helper functions for tracking events.

```JavaScript
export function setupDevtools (app, data) {
  let devtoolsApi

  const devtools = {
    // Our helpers here
  }

  setupDevtoolsPlugin({
    id: 'my-awesome-devtools-plugin',
    // ...
  }, api => {
    devtoolsApi = api

    // ...
  })

  return devtools
}
```

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

### Configure package.json for esbuild Project

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This package.json example illustrates the necessary fields for a project using esbuild for bundling. It defines main entry points, types, build scripts, and lists dependencies and devDependencies required for a Vue plugin project bundled with esbuild.

```json
{
  "name": "my-awesome-plugin",
  "version": "0.0.0",
  "main": "dist/my-plugin.browser.min.js",
  "module": "dist/my-plugin.esm-bundler.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "dev": "tsc --watch -d",
    "build": "tsc -d --emitDeclarationOnly && node ./esbuild.js"
  },
  "dependencies": {
    "@vue/devtools-api": "^6.0.0-beta.14"
  },
  "peerDependencies": {
    "vue": "^3.0.5"
  },
  "devDependencies": {
    "@types/node": "^14.14.22",
    "@vue/compiler-sfc": "^3.1.2",
    "esbuild": "^0.12.9",
    "esbuild-plugin-vue": "^0.1.2",
    "typescript": "^4.1.3",
    "vue": "^3.0.5"
  }
}
```

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

### Example Usage of `trackStart` Helper

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This snippet demonstrates how to use the `trackStart` helper function. It shows how to initiate tracking for an operation and then call the returned function (`trackEnd`) to mark the completion of the operation, creating a grouped timeline event.

```JavaScript
const trackEnd = devtools.trackStart('some-label')
// Later
trackEnd()
```

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

### Install esbuild and Vue Related Dependencies

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This command installs esbuild, esbuild-plugin-vue, and @vue/compiler-sfc as development dependencies. These packages are essential for bundling JavaScript and TypeScript files, especially for Vue projects, using the fast esbuild bundler.

```bash
yarn add -D esbuild esbuild-plugin-vue @vue/compiler-sfc
```

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

### Example package.json for TypeScript Plugin

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This package.json example illustrates the configuration for a TypeScript-based Vue Devtools plugin. It adds build scripts (dev, build) and includes TypeScript-specific development dependencies like @types/node and typescript, alongside the core @vue/devtools-api and Vue peer dependency.

```json
{
  "name": "my-awesome-plugin",
  "version": "0.0.0",
  "main": "dist/index.js",
  "scripts": {
    "dev": "tsc --watch -d",
    "build": "tsc -d"
  },
  "dependencies": {
    "@vue/devtools-api": "^6.0.0-beta.14"
  },
  "peerDependencies": {
    "vue": "^3.1.0"
  },
  "devDependencies": {
    "@types/node": "^14.14.22",
    "typescript": "^4.1.3",
    "vue": "^3.1.0"
  }
}
```

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

### Install Vue Devtools Standalone Locally as Project Dependency

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/guide/installation.md

This command installs the Vue Devtools package as a development dependency within your project, which is useful for project-specific debugging setups and ensures version control.

```bash
npm install --save-dev @vue/devtools
```

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

### Run Vue DevTools from Global Installation

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/shell-electron/README.md

Starts the Vue DevTools application after it has been installed globally.

```Bash
vue-devtools
```

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

### Set up Vue DevTools for Vue 3 Local Development

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/devtools-vue3.md

This snippet provides the necessary bash commands to clone, set up, and run Vue DevTools locally for Vue 3 projects. It involves cloning the official repository, navigating to the project directory, checking out the 'next' branch, installing dependencies with yarn, building TypeScript files in watch mode, and finally starting the local development shell for Vue 3.

```bash
# Clone repo
git clone git@github.com:vuejs/vue-devtools.git

# Change into devtools directory
cd vue-devtools

# Checkout next branch
git checkout next

# Install dependencies
yarn

# Build TypeScript dependencies
yarn build:watch

# Start local environment
yarn dev:shell-vue3
```

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

### Run Rollup Build Script

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This command executes the 'build' script defined in your package.json, which compiles the package using Rollup. Ensure you have Yarn installed and the 'build' script configured.

```bash
yarn build
```

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

### Run Development Server with Hot-Reload

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/dev/README.md

Starts a development server with hot-reloading enabled, allowing for real-time code changes and immediate feedback during development.

```Bash
yarn run serve
```

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

### Integrate Devtools Helpers into Vue Plugin Install

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This snippet shows how to integrate the `devtools` helper object, returned from `setupDevtools`, into the Vue plugin's `install` method. It ensures that the devtools helpers are initialized only in development environments or when `__VUE_PROD_DEVTOOLS__` is enabled.

```JavaScript
import { setupDevtools } from './devtools'

export default {
  install (app, options = {}) {
    let devtools

    app.mixin({
      // ...
    })

    if (process.env.NODE_ENV === 'development' || __VUE_PROD_DEVTOOLS__) {
      devtools = setupDevtools(app)
    }
  }
}
```

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

### Install Vue Devtools API Package

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This command installs the @vue/devtools-api package as a dependency using Yarn. This package is essential for registering new Vue Devtools Plugins and provides full TypeScript typings, enabling interaction with the Vue Devtools public API.

```bash
yarn add @vue/devtools-api
```

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

### Install Rollup TypeScript Plugin

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This command installs 'rollup-plugin-typescript2' as a development dependency. This plugin is necessary to enable Rollup to compile TypeScript files during the bundling process.

```bash
yarn add -D rollup-plugin-typescript2
```

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

### Example of Registering a Vue Devtools Plugin

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/api-reference.md

Provides a practical JavaScript example demonstrating how to use `setupDevtoolsPlugin` to register a Vue Devtools plugin. It shows how to define the plugin descriptor with essential properties like `id`, `app`, `label`, `packageName`, `homepage`, `logo`, and `componentStateTypes`, and how to access the API.

```js
const stateType = 'routing properties'

setupDevtoolsPlugin({
  id: 'org.vuejs.router',
  app,
  label: 'Vue Router',
  packageName: 'vue-router',
  homepage: 'https://router.vuejs.org/',
  logo: 'https://vuejs.org/images/icons/favicon-96x96.png',
  componentStateTypes: [
    stateType
  ]
}, api => {
  // Use the API here
})
```

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

### Run Vue Devtools Standalone Application

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/guide/installation.md

After installing the package globally, this command launches the standalone Vue Devtools application, which listens for connections from your Vue application.

```bash
vue-devtools
```

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

### Importing setupDevtoolsPlugin for Vue Devtools

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This snippet demonstrates how to import the `setupDevtoolsPlugin` function, which is essential for initializing a Vue Devtools plugin, from the `@vue/devtools-api` package.

```js
import { setupDevtoolsPlugin } from '@vue/devtools-api'
```

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

### Importing Vue Devtools Documentation Components

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/guide/installation.md

This Vue script block imports `InstallButtons` and `InstallButton` components, which are used within the documentation page itself to render interactive installation links for various browsers.

```vue
<script setup>
import InstallButtons from '../components/InstallButtons.vue'
import InstallButton from '../components/InstallButton.vue'
</script>
```

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

### Run Vue DevTools from Node Modules

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/guide/installation.md

After installing Vue DevTools as a project dependency, execute the local binary from your `node_modules` directory. It's recommended to verify version compatibility if a global `vue-devtools` installation is also present.

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

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

### Install Project Dependencies with Yarn

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/dev-vue3/README.md

This command installs all required project dependencies listed in `package.json` using Yarn. It's the first step to set up the development environment.

```Shell
yarn install
```

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

### Build Project for Production

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/dev/README.md

Compiles and minifies the project's source code into optimized static assets, ready for deployment to a production environment.

```Bash
yarn run build
```

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

### Run Vue DevTools from Local Project Dependency

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/shell-electron/README.md

Starts the Vue DevTools application when installed as a local project dependency, using its executable path within `node_modules`.

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

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

### Using Vue Devtools Plugin in a Vue 2 User Application

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This code illustrates how a user's Vue 2 application would import and register the custom Devtools plugin. It demonstrates the `Vue.use()` pattern and how to pass a custom option to trigger the Devtools setup.

```js
import Vue from 'vue'
import App from './App.vue'
import DevtoolsPlugin from './DevtoolsPlugin'

Vue.use(DevtoolsPlugin)

new Vue({
  render: h => h(App),
  myPlugin: true,
}).$mount('#app')
```

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

### Implement `trackStart` Helper for Timeline Events

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This snippet implements the `trackStart` helper function within `setupDevtools`. It uses `devtoolsApi.addTimelineEvent` to create a start event and returns a function to create an end event, ensuring both events are grouped using a unique `groupId` for timeline tracking.

```JavaScript
export function setupDevtools (app, data) {
  let devtoolsApi
  let trackId = 0

  const devtools = {
    trackStart: (label: string) => {
      const groupId = 'track' + trackId++

      // Start
      devtoolsApi.addTimelineEvent({
        layerId: timelineLayerId,
        event: {
          time: api.now(),
          data: {
            label
          },
          title: label,
          groupId
        }
      })

      return () => {
        // End
        devtoolsApi.addTimelineEvent({
          layerId: timelineLayerId,
          event: {
            time: api.now(),
            data: {
              label,
              done: true
            },
            title: label,
            groupId
          }
        })
      }
    }
  }

  setupDevtoolsPlugin({
    id: 'my-awesome-devtools-plugin',
    // ...
  }, api => {
    devtoolsApi = api

    // ...
  })

  return devtools
}
```

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

### Install Vue Devtools Standalone Globally via npm

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/guide/installation.md

This command installs the Vue Devtools package globally on your system, allowing you to run the standalone application from any directory in your terminal.

```bash
npm install -g @vue/devtools
```

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

### Conditional Devtools Plugin Inclusion for Production Builds

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

To optimize bundle size and performance, this code shows how to conditionally include the Devtools setup logic. It checks `process.env.NODE_ENV` for development or `__VUE_PROD_DEVTOOLS__` for forced inclusion, enabling tree-shaking in production.

```js
if (process.env.NODE_ENV === 'development' || __VUE_PROD_DEVTOOLS__) {
  setupDevtools(app)
}
```

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

### Configuring Vue Devtools Plugin Options

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This snippet illustrates how to provide essential configuration options to `setupDevtoolsPlugin`. These options include a unique `id`, a user-friendly `label`, the plugin's `packageName`, and its `homepage`.

```js
setupDevtoolsPlugin({
  id: 'my-awesome-devtools-plugin',
  label: 'My Awesome Plugin',
  packageName: 'my-awesome-plugin',
  homepage: 'https://vuejs.org'
}, api => {
  // Logic...
})
```

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

### Import Vue DevTools into Application

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/guide/installation.md

Import the `devtools` module directly into your application's entry point. Ensure this import occurs before Vue is initialized to guarantee proper functionality and avoid unexpected issues.

```javascript
import devtools from '@vue/devtools'
// import Vue from 'vue'
```

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

### Connect Vue Devtools to HTML Application (Localhost)

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/guide/installation.md

This HTML script tag should be added to the `<head>` section of your application's HTML file to connect it to the standalone Vue Devtools instance running on localhost.

```html
<script src="http://localhost:8098"></script>
```

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

### Binding Vue Devtools Plugin to a Vue Application Instance

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

To ensure the plugin is correctly bound to a specific Vue application, this example shows how to pass the Vue application instance (`app`) as an option to `setupDevtoolsPlugin`. This is crucial for the plugin to interact with the correct application context.

```js
export function setupDevtools (app) {
  setupDevtoolsPlugin({
    id: 'my-awesome-devtools-plugin',
    label: 'My Awesome Plugin',
    packageName: 'my-awesome-plugin',
    homepage: 'https://vuejs.org',
    app
  }, api => {
    // Logic...
  })
}
```

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

### Registering an Asynchronous Vue Devtools Hook

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This example shows how to register an asynchronous callback for a Vue Devtools hook. Asynchronous callbacks are handled sequentially, ensuring proper order of execution even with `await` operations.

```javascript
export function setupDevtools (app) {
  setupDevtoolsPlugin({
    id: 'my-awesome-devtools-plugin',
    // ...
  }, api => {
    api.on.hookNameHere(async (payload, context) => {
      await something()
    })
  })
}
```

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

### Execute Project Tests

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/dev/README.md

Runs all configured unit and integration tests for the project, ensuring code quality and functionality.

```Bash
yarn run test
```

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

### Applying Hexadecimal Colors in Vue Devtools Tags

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This example shows the practical application of hexadecimal color values when adding tags to components via the `visitComponentTree` hook. It sets `textColor` and `backgroundColor` properties using the numerical format.

```javascript
api.on.visitComponentTree((payload, context) => {
  const node = payload.treeNode
  if (payload.componentInstance.type.meow) {
    node.tags.push({
      label: 'meow',
      textColor: 0x000000,
      backgroundColor: 0xff984f
    })
  }
})
```

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

### Define Asynchronous Method in Vue Plugin

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This snippet defines a Vue plugin's `install` method, which includes a mixin to add an asynchronous `$doSomething` method to Vue components. This method returns a Promise that resolves after a 1-second timeout, simulating an asynchronous operation.

```JavaScript
import { setupDevtools } from './devtools'

export default {
  install (app, options = {}) {
    app.mixin({
      methods: {
        $doSomething () {
          return new Promise(resolve => {
            setTimeout(() => {
              resolve('done')
            }, 1000)
          })
        }
      }
    })

    if (process.env.NODE_ENV === 'development' || __VUE_PROD_DEVTOOLS__) {
      setupDevtools(app, data)
    }
  }
}
```

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

### Example System and Browser Information for Vue Devtools Issue Reporting

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/guide/devtools-perf.md

This example demonstrates the output from `npx envinfo --system --browsers`, which provides essential system and browser details. This information, along with the Vue Devtools version, is required when submitting performance issue reports to the development team.

```text
  System:
    OS: Linux 5.19 Fedora Linux 36 (Workstation Edition)
    CPU: (24) x64 AMD Ryzen 9 3900XT 12-Core Processor
    Memory: 34.66 GB / 62.71 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Browsers:
    Chrome: 106.0.5249.103
    Firefox: 105.0.1

  Vue Devtools version: 6.4.3

  (Don't forget to upload the profile data file!)
```

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

### Example tsconfig.json for TypeScript Plugin

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This tsconfig.json file provides a recommended configuration for a TypeScript project developing Vue Devtools plugins. It defines compiler options such as output directory, target ECMAScript version, module resolution, strictness flags, and library inclusions, ensuring proper compilation and type checking.

```json
{
  "include": [
    "src/global.d.ts",
    "src/**/*.ts",
    "__tests__/**/*.ts"
  ],
  "compilerOptions": {
    "outDir": "dist",
    "sourceMap": false,

    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "allowJs": false,
    "skipLibCheck": true,

    "noUnusedLocals": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "noImplicitReturns": false,
    "strict": true,
    "isolatedModules": true,

    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "removeComments": false,
    "jsx": "preserve",
    "lib": [
      "esnext",
      "dom"
    ],
    "types": [
      "node"
    ]
  }
}
```

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

### Populating Custom Inspector Tree Nodes with getInspectorTree

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This example demonstrates how to populate the `payload.rootNodes` array within the `getInspectorTree` hook. It shows the structure for defining custom inspector nodes, including IDs, labels, children, and optional tags for visual styling.

```js
api.on.getInspectorTree((payload, context) => {
  if (payload.inspectorId === inspectorId) {
    payload.rootNodes = [
      {
        id: 'root',
        label: 'Awesome root',
        children: [
          {
            id: 'child-1',
            label: 'Child 1',
            tags: [
              {
                label: 'awesome',
                textColor: 0xffffff,
                backgroundColor: 0x000000
              }
            ]
          },
          {
            id: 'child-2',
            label: 'Child 2'
          }
        ]
      },
      {
        id: 'root2',
        label: 'Amazing root'
      }
    ]
  }
})
```

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

### Vue Devtools Hexadecimal Color Encoding

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This snippet illustrates how colors are encoded as hexadecimal numbers in the Vue Devtools API. It provides examples of common colors like black, white, orange, and green, showing their numerical representations.

```javascript
0x000000 // black
0xffffff // white
0xff984f // orange
0x41b86a // green
```

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

### Install Vue DevTools Globally

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/shell-electron/README.md

Installs the `@vue/devtools` package globally using npm, making the `vue-devtools` command available system-wide.

```Bash
npm install -g @vue/devtools
```

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

### Centralizing State Type Definition in Vue Devtools Plugin

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This example demonstrates using a constant variable, `stateType`, to define the section type for component state. This promotes consistency and maintainability when adding multiple state fields within the `setupDevtools` function.

```js
const stateType = 'My Awesome Plugin state'

export function setupDevtools (app, data) {
  setupDevtoolsPlugin({
    id: 'my-awesome-devtools-plugin',
    // ...
  }, api => {
    api.on.inspectComponent((payload, context) => {
      payload.instanceData.state.push({
        type: stateType,
        key: '$hello',
        value: data.message
      })

      payload.instanceData.state.push({
        type: stateType,
        key: 'time counter',
        value: data.counter
      })
    })
  })
}
```

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

### Configure esbuild for Vue Plugin Bundling

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This JavaScript configuration file demonstrates how to set up esbuild for bundling a Vue plugin. It defines common build options, handles external dependencies, and creates different output formats (ESM, browser development, and browser production builds) with specific configurations for each.

```javascript
const esbuild = require('esbuild')
const vue = require('esbuild-plugin-vue').default

const pkgName = 'my-plugin'

/** @type {import('esbuild').BuildOptions} */
const commonOptions = {
  entryPoints: ['./src/index.ts'],
  bundle: true,
  sourcemap: true,
  external: [
    'vue',
    // Add libraries to exclude from bundling for browser builds
  ],
  target: 'es6', // Change to the targets you want
  plugins: [
    vue()
  ]
}

// ESM Bundler
esbuild.build({
  ...commonOptions,
  outfile: `dist/${pkgName}.esm-bundler.js`,
  format: 'esm',
  platform: 'node',
  external: [
    // Mark all dependencies as external
    ...Object.keys(require('./package.json').dependencies),
    ...Object.keys(require('./package.json').peerDependencies),
  ],
})

// Browser dev
esbuild.build({
  ...commonOptions,
  outfile: `dist/${pkgName}.browser.js`,
  format: 'iife',
  platform: 'browser',
  define: {
    'process.env.NODE_ENV': JSON.stringify('development'),
    '__VUE_PROD_DEVTOOLS__': JSON.stringify(process.env.__VUE_PROD_DEVTOOLS__ || false),
  },
})

// Browser prod
esbuild.build({
  ...commonOptions,
  outfile: `dist/${pkgName}.browser.min.js`,
  format: 'iife',
  platform: 'browser',
  define: {
    'process.env.NODE_ENV': JSON.stringify('production'),
    '__VUE_PROD_DEVTOOLS__': JSON.stringify(process.env.__VUE_PROD_DEVTOOLS__ || false),
  },
  minify: true,
})
```

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

### Setting Up Vue Devtools Plugin for Vue 2 Applications

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

For Vue 2 applications, this snippet shows how to integrate the Devtools plugin using a global mixin. It leverages the `beforeCreate` hook to pass the root component instance to `setupDevtools`, ensuring compatibility.

```js
import { setupDevtools } from './devtools'

export default {
  install (Vue) {
    Vue.mixin({
      beforeCreate () {
        if (this.$options.myPlugin) {
          setupDevtools(this)
        }
      }
    })
  }
}
```

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

### Install Development Dependencies for Vue DevTools

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/shell-electron/README.md

Installs all necessary dependencies for developing the `vue-remote-devtools` project.

```Bash
npm install
```

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

### Integrate Vue-devtools-plugin with Eruda using NPM

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/README.md

This snippet shows how to install and initialize the Vue-devtools-plugin for Eruda. It requires `eruda-vue-devtools` and `eruda` packages. `eruda.init()` should be called first, followed by `initPlugin(eruda)` before the Vue root instance.

```javascript
...// eruda
import { initPlugin } from 'eruda-vue-devtools' // for eruda
import eruda from 'eruda' // 引入工具包

eruda.init() // 初始化
initPlugin(eruda); // 需要在创建Vue根实例前调用
...
```

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

### Lint and Fix Code Files

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/dev/README.md

Analyzes project files for stylistic and programmatic errors, automatically fixing issues where possible to maintain code consistency and quality.

```Bash
yarn run lint
```

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

### Configure package.json for Rollup Bundling

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This snippet demonstrates how to set up the 'main', 'module', 'unpkg', 'jsdelivr', 'exports', and 'scripts' fields in your package.json for a Vue 3 plugin. This configuration ensures proper module resolution for different environments and defines a build script using Rollup.

```json
{
  "name": "my-plugin",
  "version": "0.0.0",
  "description": "A demo Vue 3 plugin with devtools integration",
  "author": {
    "name": "Guillaume Chau",
    "email": "guillaume.b.chau@gmail.com"
  },
  "main": "dist/my-plugin.cjs.js",
  "module": "dist/my-plugin.esm-bundler.js",
  "unpkg": "dist/my-plugin.global.js",
  "jsdelivr": "dist/my-plugin.global.js",
  "exports": {
    ".": {
      "require": "./dist/my-plugin.cjs.js",
      "browser": "./dist/my-plugin.esm-browser.js",
      "import": "./dist/my-plugin.esm-bundler.js",
      "module": "./dist/my-plugin.esm-bundler.js"
    },
    "./package.json": "./package.json"
  },
  "sideEffects": false,
  "scripts": {
    "build": "rimraf dist && rollup -c rollup.config.js"
  }
  ...
}
```

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

### Manually Refreshing Vue Devtools Custom Inspector

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This example shows how to manually trigger updates for custom inspectors using `api.sendInspectorTree` and `api.sendInspectorState`. These functions force the Devtools to re-fetch the inspector tree and state, respectively, by re-calling their corresponding hooks.

```js
// Update tree
api.sendInspectorTree(inspectorId)

// Update state
api.sendInspectorState(inspectorId)
```

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

### Configuring Custom Settings for Vue Devtools Plugin

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This example details how to define custom settings for a Vue Devtools plugin using the `settings` option. It covers various setting types like boolean, text, and choice, including options for choice types and component rendering.

```js
setupDevtoolsPlugin({
  id: 'my-awesome-devtools-plugin',
  settings: {
    test1: {
      label: 'I like vue devtools',
      type: 'boolean',
      defaultValue: true
    },
    test2: {
      label: 'Quick choice',
      type: 'choice',
      defaultValue: 'a',
      options: [
        { value: 'a', label: 'A' },
        { value: 'b', label: 'B' },
        { value: 'c', label: 'C' }
      ],
      component: 'button-group'
    },
    test3: {
      label: 'Long choice',
      type: 'choice',
      defaultValue: 'a',
      options: [
        { value: 'a', label: 'A' },
        { value: 'b', label: 'B' },
        { value: 'c', label: 'C' },
        { value: 'd', label: 'D' },
        { value: 'e', label: 'E' }
      ]
    },
    test4: {
      label: 'What is your name?',
      type: 'text',
      defaultValue: ''
    }
  }
}, api => {
  // Use `api.getSettings()` to get the current settings for the plugin
  console.log(api.getSettings())
})
```

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

### Integrate Vue-devtools-plugin with vConsole using NPM

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/README.md

This snippet demonstrates how to install and initialize the Vue-devtools-plugin for vConsole in a Vue.js project. It requires `vue-vconsole-devtools` and `vconsole` packages. The `initPlugin` function must be called before creating the Vue root instance.

```javascript
...// vconsole
import VConsole from "vconsole";
import { initPlugin } from 'vue-vconsole-devtools' // for vconsole

initPlugin(new VConsole()); // 需要在创建Vue根实例前调用
...
```

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

### Test Vue Devtools as Firefox Extension

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/guide/contributing.md

This snippet outlines the shell commands required to set up and run the Vue Devtools as a Firefox extension for testing. It includes installing the `web-ext` tool, configuring the PATH, and running the build watcher and Firefox development shell in parallel.

```Shell
yarn global add web-ext
PATH=$PATH:$(yarn global bin)
cd devtools
yarn install
# In terminal 1:
yarn run build:watch
# In terminal 2:
yarn run dev:chrome
yarn run:firefox
```

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

### Watch and Compile Vue DevTools Source Files

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/shell-electron/README.md

Starts a process that watches the `src` folder for changes and recompiles the files, useful during development.

```Bash
npm run dev
```

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

### Vue Devtools Plugin Setup Function Reference

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/api-reference.md

Documents the `setupDevtoolsPlugin` function, which is used to register a devtools plugin. It details the `pluginDescriptor` object's properties, including `id`, `app`, `label`, and optional fields like `packageName`, `homepage`, `logo`, `componentStateTypes`, `disableAppScope`, `disablePluginScope`, `enableEarlyProxy`, and `settings`.

```APIDOC
setupDevtoolsPlugin (pluginDescriptor, setupFn)

The plugin descriptor is an object describing the devtools plugin to the Vue devtools user.

It has the following properties:
- `id`: a unique id between all possible plugins. It's recommended to use a Reverse Domain Name notation, for example: `org.vuejs.router`, or the npm package name.
- `app`: the current application instance. The devtools is scoped to a specific application, so you have to specify on which application instance the devtools plugin is going to work.
- `label`: the label displayed to the user. It's recommended to use a user-friendly name from your plugin, for example: `'Vue Router'`. Do not put `'devtools'` or `'plugin'` in the name, since the user will be seeing this devtools plugin while using your Vue plugin already.
- `packageName` (optional): The `npm` package name associated with the devtools plugin, for example `'vue-router'`.
- `homepage` (optional): URL to your documentation.
- `logo` (optional): URL to a logo of your Vue plugin.
- `componentStateTypes` (optional): an array of custom component state section names you are going to add to the Component inspector. If you add new state to the component inspector, you should declare their sections here so the devtools can display the plugin icon.
- `disableAppScope` (optional): if set to `true`, the hooks registered with this plugin will not be scoped to the associated app. In that case, you might need to use the `app` payload property to check what the current app is inside each hook.
- `disablePluginScope` (optional): if set to `true`, the hooks registered with this plugin will not be scoped to the current plugin. In that case, you might need to use the `pluginId` payload property (depending on the hook) to check what the related plugin is inside each hook.
- `enableEarlyProxy` (optional): if set to `true`, the plugin will run even if the Vue devtools are not connected yet using a proxy of the Plugin API and a buffer queue. This is useful if you need to add timeline events before the user opens the devtools.
- `settings` (optional): an object describing the plugin settings.
```

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

### Retrieve Vue Component Instances (JavaScript)

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/api-reference.md

This utility function allows retrieval of all component instances associated with a given Vue application. It's typically used within inspector hooks, such as `getInspectorTree`, to populate a list of components. The example demonstrates how to use it to get instances and add them as root nodes to a custom inspector tree.

```js
let componentInstances = []

api.on.getInspectorTree(async (payload) => {
  if (payload.inspectorId === 'test-inspector') { // e.g. custom inspector
    componentInstances = await api.getComponentInstances(app)
      for (const instance of instances) {
      payload.rootNodes.push({
        id: instance.uid.toString(),
        label: `Component ${instance.uid}`
      })
    }

    // something todo ...
  }
})
```

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

### Install Vue DevTools Locally as Project Dependency

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/shell-electron/README.md

Installs the `@vue/devtools` package as a development dependency in the current project, suitable for project-specific usage.

```Bash
npm install --save-dev @vue/devtools
```

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

### Sending Custom Timeline Events in Vue Devtools

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This example shows how to add custom events to a registered timeline layer using `api.addTimelineEvent`. It captures mouse click coordinates and sends them as event data, demonstrating how to log custom interactions within the Devtools timeline.

```js
window.addEventListener('click', event => {
  api.addTimelineEvent({
    layerId: timelineLayerId,
    event: {
      time: api.now(),
      data: {
        mouseX: event.clientX,
        mouseY: event.clientY
      }
    }
  })
})
```

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

### Start ngrok for Remote Vue DevTools Inspection

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/shell-electron/README.md

Starts an ngrok tunnel to expose the Vue DevTools server running on port 8098 to the internet, enabling remote inspection.

```Bash
ngrok http 8098
```

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

### Integrate `trackStart` into Asynchronous Method

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This snippet integrates the `trackStart` helper into the `$doSomething` asynchronous method within the Vue plugin's mixin. It ensures that the method's execution is tracked on the Vue Devtools timeline, with a check for `devtools` existence to support tree-shaking in production.

```JavaScript
let devtools

app.mixin({
  methods: {
    $doSomething () {
      const trackEnd = devtools ? devtools.trackStart('$doSomething') : null
      return new Promise(resolve => {
        setTimeout(() => {
          if (trackEnd) trackEnd()
          resolve('done')
        }, 1000)
      })
    }
  }
})

if (process.env.NODE_ENV === 'development' || __VUE_PROD_DEVTOOLS__) {
  devtools = setupDevtools(app, data)
}
```

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

### Connect Vue Devtools to HTML Application (Remote/Custom Host)

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/guide/installation.md

This HTML script block allows configuring the host and port for the standalone Vue Devtools, enabling remote debugging or custom port usage. The subsequent script tag then connects to the specified address.

```html
<script>
  window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost
  window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098
</script>
<script src="http://<your-local-ip>:8098"></script>
```

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

### Vue Devtools API `visitComponentTree` Hook

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

Documentation for the `api.on.visitComponentTree` hook, used to add tags or modify nodes in the components tree. The `payload` argument contains `treeNode` and `componentInstance` for detailed manipulation.

```APIDOC
api.on.visitComponentTree(callback: Function)
  callback: (payload: { treeNode: object, componentInstance: object }, context: any) => void | Promise<void>
    payload:
      treeNode: The current node in the component tree.
      componentInstance: The Vue component instance associated with the node.
    context: Exposes data about the devtools.
```

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

### Accessing Vue Devtools API in Plugin Callback

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This snippet highlights how the `setupDevtoolsPlugin` function provides a callback as its second argument. This callback receives the Vue Devtools API object (`api`), which is used to interact with the Devtools interface.

```js
export function setupDevtools (app) {
  setupDevtoolsPlugin({
    id: 'my-awesome-devtools-plugin',
    // ...
  }, api => {
    // Use the API here...
  })
}
```

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

### Listening for Vue Devtools Plugin Settings Changes

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This snippet demonstrates how to use the `api.on.setPluginSettings` hook to subscribe to changes made by the user to the plugin's custom settings within the Devtools interface. The callback receives a payload with the updated settings.

```js
api.on.setPluginSettings(payload => {
  // Do something...
})
```

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

### Test Vue Devtools as Chrome Extension

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/guide/contributing.md

This snippet provides the shell commands to prepare and run the Vue Devtools as an unpacked Chrome extension for local testing. It involves navigating to the project directory, installing dependencies, and running the build watcher and Chrome development shell in parallel.

```Shell
cd devtools
yarn install
# In terminal 1:
yarn run build:watch
# In terminal 2:
yarn run dev:chrome
```

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

### Conditionally Load Vue-devtools-plugin in Development Environment

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/README.md

This advanced usage example shows how to load the vConsole and Vue-devtools-plugin asynchronously only when `process.env.NODE_ENV` is 'development'. This helps reduce bundle size in production builds by leveraging webpack's asynchronous module loading.

```javascript
new Vue({
  render: (h) => h(App),
}).$mount("#app");

// 在创建跟实例以后调用， 需要借助webpack的异步模块加载能力
if(process.env.NODE_ENV === "development"){
   Promise.all([import("vconsole"), import("vue-vconsole-devtools")]).then(
     (res) => {
       if (res.length === 2) {
         Vue.config.devtools = true;
         window.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("init",Vue)
         const VConsole = res[0].default;
         const Devtools = res[1].default;
         Devtools.initPlugin(new VConsole());
       }
     }
   );
 }
```

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

### Full Example: Editable Custom Component Field in Vue Devtools

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/api-reference.md

Provides a comprehensive example demonstrating how to make a custom component field editable in Vue Devtools by combining `api.on.inspectComponent` to mark the field as editable and `api.on.editComponentState` to handle the actual state update.

```js
const myState = {
  foo: 'bar'
}

api.on.inspectComponent(payload => {
  if (payload.instanceData) {
    payload.instanceData.state.push({
      type: stateType,
      key: 'foo',
      value: myState.foo,
      editable: true
    })
  }
})

api.on.editComponentState(payload => {
  if (payload.type === stateType) {
    payload.set(myState)
  }
})
```

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

### Enabling Early Proxy for Vue Devtools Plugin API

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This snippet demonstrates how to enable `enableEarlyProxy` in the `setupDevtoolsPlugin` options. Setting this to `true` allows the plugin API (`api`) to act as a proxy, enabling timeline events to be sent even before the Vue Devtools panel is fully opened and connected.

```js
setupDevtoolsPlugin({
  id: 'my-awesome-devtools-plugin',
  app,
  enableEarlyProxy: true
}, api => {
  // `api` will be a proxy waiting for the real API to be available
})
```

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

### Connect Vue DevTools to Host

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/guide/installation.md

Conditionally connect the Vue DevTools to a specified host and port, typically in a development environment. The `host` argument defaults to `http://localhost` but can be set to a local IP for mobile debugging. The `port` argument can be set to `null` if using a proxy server to prevent port addition to the connection URL.

```javascript
if (process.env.NODE_ENV === 'development') {
  devtools.connect(/* host, port */)
}
```

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

### Vue Devtools API: api.on.setPluginSettings Hook

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This API documentation describes the `api.on.setPluginSettings` hook, which allows plugins to react to user-initiated changes to their custom settings in Vue Devtools. It details the `payload` object containing the updated settings.

```APIDOC
api.on.setPluginSettings(payload: object) => void
  description: Registers a callback to be invoked when plugin settings are changed by the user.
  payload: object
    description: An object containing the updated settings values.
    properties:
      <setting_key>: any
        description: The new value for the specific setting, keyed by its identifier.
```

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

### Call Asynchronous Method from Vue Component

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This simple snippet demonstrates how to call the `$doSomething` asynchronous method from within any Vue component in the user application, assuming it has been exposed via a plugin mixin.

```JavaScript
this.$doSomething()
```

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

### Registering a Synchronous Vue Devtools Hook

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This snippet demonstrates how to register a synchronous callback for a Vue Devtools hook using `api.on.hookNameHere`. The callback receives `payload` and `context` arguments, allowing for interaction with devtools state.

```javascript
export function setupDevtools (app) {
  setupDevtoolsPlugin({
    id: 'my-awesome-devtools-plugin',
    // ...
  }, api => {
    api.on.hookNameHere((payload, context) => {
      // Do something...
    })
  })
}
```

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

### Example of Adding Tags to Vue Devtools Component Tree

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/api-reference.md

Illustrates how to use the `api.on.visitComponentTree` hook to dynamically add tags to component tree nodes based on their name. It demonstrates modifying the `treeNode.tags` array with custom labels, text colors, background colors, and tooltips.

```js
api.on.visitComponentTree(payload => {
  const node = payload.treeNode
  if (node.name === 'MyApp') {
    node.tags.push({
      label: 'root',
      textColor: 0x000000,
      backgroundColor: 0xFF984F
    })
  } else {
    node.tags.push({
      label: 'test',
      textColor: 0xFFAAAA,
      backgroundColor: 0xFFEEEE,
      tooltip: `It's a test!`
    })
  }
})
```

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

### Vue Devtools API `notifyComponentUpdate` Function

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

Documentation for the `api.notifyComponentUpdate` function, which forces a refresh of the components tree for a specific component instance. This ensures that relevant hooks are re-called and the UI is updated.

```APIDOC
api.notifyComponentUpdate(componentInstance: object)
  componentInstance: The Vue component instance to update.
```

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

### Add TypeScript Types Field to package.json

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

This snippet shows how to include the 'types' field in your package.json. This field points to the TypeScript declaration file, allowing consumers of your package to benefit from type checking and autocompletion.

```json
{
  "name": "my-plugin",
  "version": "0.0.0",
  "description": "A demo Vue 3 plugin with devtools integration",
  "author": {
    "name": "Guillaume Chau",
    "email": "guillaume.b.chau@gmail.com"
  },
  "main": "dist/my-plugin.cjs.js",
  "module": "dist/my-plugin.esm-bundler.js",
  "unpkg": "dist/my-plugin.global.js",
  "jsdelivr": "dist/my-plugin.global.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": {
      "require": "./dist/my-plugin.cjs.js",
      "browser": "./dist/my-plugin.esm-browser.js",
      "import": "./dist/my-plugin.esm-bundler.js",
      "module": "./dist/my-plugin.esm-bundler.js"
    },
    "./package.json": "./package.json"
  },
  "sideEffects": false,
  "scripts": {
    "build": "rimraf dist && rollup -c rollup.config.js"
  }
  ...
}
```

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

### Vue Devtools API Hooks Overview

Source: https://github.com/zippowxk/vue-devtools-plugin/blob/master/vue-devtools/packages/docs/src/plugin/plugins-guide.md

Overview of the Vue Devtools API hooks available via `api.on`. Hooks allow registering callbacks to add debugging information to existing elements. All hook callbacks receive `payload` (modifiable state) and `context` (devtools data) arguments.

```APIDOC
api.on.hookName(callback: Function)
  callback: (payload: any, context: any) => void | Promise<void>
    payload: Holds state related to the hook, can be modified.
    context: Exposes data about the devtools.
```