Vite Plugin Vue DevTools

A Vite plugin that integrates Vue DevTools into Vue.js applications during development. This plugin enhances the development experience by enabling comprehensive debugging, component inspection, and state management analysis directly within the browser's developer tools without requiring browser extensions.

Package Information

• Package Name: vite-plugin-vue-devtools
• Package Type: npm
• Language: TypeScript
• Installation: npm add -D vite-plugin-vue-devtools

Core Imports

import VueDevTools from "vite-plugin-vue-devtools";

For CommonJS:

const VueDevTools = require("vite-plugin-vue-devtools");

Basic Usage

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools'

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

Architecture

The Vite Plugin Vue DevTools is built around several key components:

• Plugin Factory: Main function that creates an array of Vite plugins for DevTools integration
• RPC Server: Communication layer between the development server and DevTools client
• Asset Management: Server-side functionality for scanning and analyzing project assets
• Module Graph: Dependency analysis and module relationship tracking
• Client Overlay: Browser-side integration that injects DevTools functionality
• Component Inspector: Vue component inspection capabilities through vite-plugin-vue-inspector

Capabilities

Plugin Configuration

Main plugin factory function with comprehensive configuration options for customizing DevTools behavior and integration.

function VitePluginVueDevTools(options?: VitePluginVueDevToolsOptions): PluginOption;

interface VitePluginVueDevToolsOptions {
  appendTo?: string | RegExp;
  componentInspector?: boolean | VitePluginInspectorOptions;
  launchEditor?: string;
  openInEditorHost?: string | false; // Deprecated in v7.1.0
  clientHost?: string | false; // Deprecated in v7.1.0
}

Plugin Configuration

Asset Analysis

Server-side RPC functions for analyzing and managing project assets including images, videos, fonts, and other static resources.

function getStaticAssets(): Promise<AssetInfo[]>;
function getAssetImporters(url: string): Promise<AssetImporter[]>;
function getImageMeta(filepath: string): Promise<ImageMeta | undefined>;
function getTextAssetContent(filepath: string, limit?: number): Promise<string | undefined>;

Asset Analysis

Module Graph Analysis

Module dependency tracking and analysis for Vue/JS/TS files with real-time updates during development.

function getGraphModules(): Promise<ModuleInfo[]>;

Module Graph Analysis

Server Communication

Core RPC communication functions for DevTools server connectivity and health monitoring.

function heartbeat(): boolean;
function getRoot(): string;

Server Communication

Types

interface AssetInfo {
  path: string;
  relativePath: string;
  publicPath: string;
  filePath: string;
  type: AssetType;
  size: number;
  mtime: number;
}

interface AssetImporter {
  url: string | null;
  id: string | null;
}

interface ModuleInfo {
  id: string;
  deps: string[];
}

type AssetType = 'image' | 'video' | 'audio' | 'font' | 'text' | 'wasm' | 'other';