tessl/npm-vite-plugin-vue-devtools

A vite plugin for Vue DevTools that enhances Vue developer experience with debugging and inspection capabilities

—

Pending

Overview

Eval results

Files

Plugin Configuration

Name: tessl/npm-vite-plugin-vue-devtools
Author: tessl

Configuration options and setup for the Vite Plugin Vue DevTools, including customization of DevTools behavior, component inspection, and editor integration.

Core Imports

import VueDevTools from "vite-plugin-vue-devtools";
import type { VitePluginVueDevToolsOptions } from "vite-plugin-vue-devtools";

Capabilities

Main Plugin Function

Creates an array of Vite plugins that enable Vue DevTools integration during development.

/**
 * Creates Vue DevTools Vite plugin with optional configuration
 * @param options - Plugin configuration options
 * @returns Array of Vite plugins for DevTools functionality
 */
function VitePluginVueDevTools(options?: VitePluginVueDevToolsOptions): PluginOption;

Usage Examples:

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

// Basic usage with default options
export default defineConfig({
  plugins: [
    vue(),
    VueDevTools(),
  ],
})

// With custom configuration
export default defineConfig({
  plugins: [
    vue(),
    VueDevTools({
      launchEditor: 'webstorm',
      componentInspector: {
        toggleComboKey: 'control-shift',
        toggleButtonVisibility: 'active',
      },
      appendTo: /main\.(js|ts)$/,
    }),
  ],
})

Configuration Options

Plugin configuration interface with options for customizing DevTools behavior.

interface VitePluginVueDevToolsOptions {
  /** 
   * Append import to module ending with pattern instead of script tag
   * Useful for non-HTML entry points
   * @default ''
   */
  appendTo?: string | RegExp;
  
  /** 
   * Enable Vue component inspector functionality
   * @default true
   */
  componentInspector?: boolean | VitePluginInspectorOptions;
  
  /** 
   * Target editor when opening files from DevTools
   * @default 'code'
   */
  launchEditor?: EditorType;
  
  /** 
   * @deprecated Removed in v7.1.0 - Host auto-detected
   */
  openInEditorHost?: string | false;
  
  /** 
   * @deprecated Removed in v7.1.0 - Host auto-detected
   */
  clientHost?: string | false;
}

type EditorType = 
  | 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' 
  | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' 
  | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' 
  | 'sublime' | 'vim' | 'visualstudio' | 'webstorm' | 'rider' 
  | string;

// Inspector-specific configuration options (from vite-plugin-vue-inspector)
interface VitePluginInspectorOptions {
  toggleComboKey?: string;
  toggleButtonVisibility?: 'always' | 'active' | 'never';
  appendTo?: string | RegExp;
  openInEditor?: boolean;
  launchEditor?: EditorType;
}

Default Configuration

The plugin uses sensible defaults for development workflows.

const defaultOptions: VitePluginVueDevToolsOptions = {
  appendTo: '',
  componentInspector: true,
  launchEditor: process.env.LAUNCH_EDITOR ?? 'code',
};

Plugin Behavior

Vite Plugin Hooks

The plugin implements several Vite plugin hooks for seamless integration:

configResolved: Stores resolved Vite configuration for internal use
configureServer: Sets up development server middleware and RPC communication
resolveId: Handles virtual module resolution for DevTools resources
load: Loads virtual modules and DevTools-specific resources
transform: Transforms code to inject DevTools imports when using appendTo
transformIndexHtml: Injects DevTools scripts into HTML entry points
buildEnd: Plugin cleanup operations

Virtual Modules

The plugin creates virtual modules for internal functionality:

virtual:vue-devtools-options: Exposes plugin configuration to client code
virtual:vue-devtools-path:*: Resolves DevTools resource paths dynamically

Development Server Integration

When the development server starts, the plugin:

Sets up middleware to serve DevTools client at /__devtools__ endpoint
Establishes RPC communication between server and client
Integrates with Vite's module graph for real-time updates
Configures component inspector if enabled
Displays DevTools URLs in server startup logs

Server Output Example:

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

Install with Tessl CLI

npx tessl i tessl/npm-vite-plugin-vue-devtools

docs

asset-analysis.md

index.md

module-graph.md

plugin-configuration.md

server-communication.md

tile.json

tessl/npm-vite-plugin-vue-devtools