Nuxt DevTools

import type { ModuleOptions } from "@nuxt/devtools";
export default defineNuxtConfig({
  devtools: {
    enabled: true // or false to disable
  }
})

// Auto-imported when devtools module is enabled
const devtools = useNuxtDevTools();

// Or explicit import from Nuxt's virtual imports
import { useNuxtDevTools } from "#imports";

import { NuxtDevtoolsFrame, NuxtDevtoolsInspectPanel } from "@nuxt/devtools/webcomponents";

import { addCustomTab, extendServerRpc, startSubprocess, onDevToolsInitialized } from "@nuxt/devtools-kit";

// Enable devtools in nuxt.config.ts
export default defineNuxtConfig({
  devtools: {
    enabled: true,
    componentInspector: true,
    viteInspect: true,
    vscode: {
      enabled: true,
      port: 3080
    }
  }
})

// Use devtools client in runtime (auto-imported)
export default {
  setup() {
    const devtools = useNuxtDevTools();
    
    // devtools.value contains the client API when available
    if (devtools.value) {
      console.log('DevTools is available');
    }
  }
}

export default defineNuxtModule<ModuleOptions>;

interface ModuleOptions {
  enabled?: boolean | undefined;
  componentInspector?: boolean;
  viteInspect?: boolean;
  vscode?: VSCodeOptions;
  disableAuthorization?: boolean;
}

interface VSCodeOptions {
  enabled?: boolean;
  startOnBoot?: boolean;
  port?: number;
  reuseExistingServer?: boolean;
}

function useNuxtDevTools(): Ref<NuxtDevtoolsHostClient | undefined>;

interface NuxtDevtoolsHostClient {
  // RPC methods for communication with devtools
  [key: string]: any;
}

const NuxtDevtoolsFrame: VueElementConstructor;
const NuxtDevtoolsInspectPanel: VueElementConstructor;

interface NuxtDevToolsInspectorProps {
  matched?: ElementTraceInfo;
  hasParent?: boolean;
  mouse: { x: number; y: number };
}

function addCustomTab(
  tab: ModuleCustomTab | (() => ModuleCustomTab | Promise<ModuleCustomTab>),
  nuxt?: Nuxt
): void;

function extendServerRpc<ClientFunctions, ServerFunctions>(
  namespace: string,
  functions: ServerFunctions,
  nuxt?: Nuxt
): BirpcGroup<ClientFunctions, ServerFunctions>;

function startSubprocess(
  execaOptions: SubprocessOptions,
  tabOptions: TerminalState,
  nuxt?: Nuxt
): SubprocessController;

function onDevToolsInitialized(
  fn: (info: NuxtDevtoolsInfo) => void,
  nuxt?: Nuxt
): void;

/**
 * Get the main package.json of the project
 * @param nuxt - Nuxt instance (optional)
 * @returns Promise resolving to package.json content
 */
function getMainPackageJSON(nuxt?: Nuxt): Promise<PackageJson>;

/**
 * Check for updates of a specific package
 * @param name - Package name to check
 * @param current - Current version (optional)
 * @param nuxt - Nuxt instance (optional)
 * @returns Promise resolving to update information or undefined
 */
function checkForUpdateOf(
  name: string, 
  current?: string, 
  nuxt?: Nuxt
): Promise<PackageUpdateInfo | undefined>;

interface NuxtDevtoolsHostClient {
  nuxt: NuxtApp;
  hooks: Hookable<NuxtDevtoolsClientHooks>;
  getIframe: () => HTMLIFrameElement | undefined;
  inspector?: {
    enable: () => void;
    disable: () => void;
    toggle: () => void;
    isEnabled: Ref<boolean>;
    isAvailable: Ref<boolean>;
  };
  devtools: {
    close: () => void;
    open: () => void;
    toggle: () => void;
    reload: () => void;
    navigate: (path: string) => void;
    popup?: () => any;
  };
  app: {
    reload: () => void;
    navigate: (path: string, hard?: boolean) => void;
    appConfig: AppConfig;
    colorMode: Ref<'dark' | 'light'>;
    frameState: Ref<DevToolsFrameState>;
    $fetch: $Fetch;
  };
  metrics: {
    clientHooks: () => HookInfo[];
    clientPlugins: () => PluginMetric[] | undefined;
    clientTimeline: () => TimelineMetrics | undefined;
    loading: () => LoadingTimeMetric;
  };
  revision: Ref<number>;
  syncClient: () => NuxtDevtoolsHostClient;
}

interface NuxtDevtoolsIframeClient {
  host: NuxtDevtoolsHostClient;
  devtools: NuxtDevtoolsClient;
}

interface NuxtDevtoolsClient {
  rpc: BirpcReturn<ServerFunctions, ClientFunctions>;
  renderCodeHighlight: (code: string, lang?: BuiltinLanguage, options?: CodeHighlightOptions) => {
    code: string;
    supported: boolean;
  };
  renderMarkdown: (markdown: string) => string;
  colorMode: string;
  extendClientRpc: <ServerFunctions = Record<string, never>, ClientFunctions = Record<string, never>>(name: string, functions: ClientFunctions) => BirpcReturn<ServerFunctions, ClientFunctions>;
}

interface DevToolsFrameState {
  width: number;
  height: number;
  top: number;
  left: number;
  open: boolean;
  route: string;
  position: 'left' | 'right' | 'bottom' | 'top';
  closeOnOutsideClick: boolean;
  minimizePanelInactive: number;
}

interface NuxtDevtoolsClientHooks {
  'devtools:navigate': (path: string) => void;
  'host:inspector:click': (path: string) => void;
  'host:inspector:close': () => void;
  'host:update:reactivity': () => void;
  'host:action:navigate': (path: string) => void;
  'host:action:reload': () => void;
}

interface ServerFunctions {
  // Static RPCs
  getServerConfig: () => NuxtOptions;
  getServerDebugContext: () => Promise<ServerDebugContext | undefined>;
  getServerData: (token: string) => Promise<NuxtServerData>;
  getServerRuntimeConfig: () => Record<string, any>;
  getModuleOptions: () => ModuleOptions;
  getComponents: () => Component[];
  getComponentsRelationships: () => Promise<ComponentRelationship[]>;
  getAutoImports: () => AutoImportsWithMetadata;
  getServerPages: () => NuxtPage[];
  getCustomTabs: () => ModuleCustomTab[];
  getServerHooks: () => HookInfo[];
  getServerLayouts: () => NuxtLayout[];
  getStaticAssets: () => Promise<AssetInfo[]>;
  getServerRoutes: () => ServerRouteInfo[];
  getServerTasks: () => ScannedNitroTasks | null;
  getServerApp: () => NuxtApp | undefined;

  // Options
  getOptions: <T extends keyof NuxtDevToolsOptions>(tab: T) => Promise<NuxtDevToolsOptions[T]>;
  updateOptions: <T extends keyof NuxtDevToolsOptions>(tab: T, settings: Partial<NuxtDevToolsOptions[T]>) => Promise<void>;
  clearOptions: () => Promise<void>;

  // Updates & NPM
  checkForUpdateFor: (name: string) => Promise<PackageUpdateInfo | undefined>;
  getNpmCommand: (command: NpmCommandType, packageName: string, options?: NpmCommandOptions) => Promise<string[] | undefined>;
  runNpmCommand: (token: string, command: NpmCommandType, packageName: string, options?: NpmCommandOptions) => Promise<{ processId: string } | undefined>;

  // Terminal
  getTerminals: () => TerminalInfo[];
  getTerminalDetail: (token: string, id: string) => Promise<TerminalInfo | undefined>;
  runTerminalAction: (token: string, id: string, action: TerminalAction) => Promise<boolean>;

  // Storage
  getStorageMounts: () => Promise<StorageMounts>;
  getStorageKeys: (base?: string) => Promise<string[]>;
  getStorageItem: (token: string, key: string) => Promise<StorageValue>;
  setStorageItem: (token: string, key: string, value: StorageValue) => Promise<void>;
  removeStorageItem: (token: string, key: string) => Promise<void>;

  // Actions
  telemetryEvent: (payload: object, immediate?: boolean) => void;
  customTabAction: (name: string, action: number) => Promise<boolean>;
  runWizard: <T extends WizardActions>(token: string, name: T, ...args: GetWizardArgs<T>) => Promise<void>;
  openInEditor: (filepath: string) => Promise<boolean>;
  restartNuxt: (token: string, hard?: boolean) => Promise<void>;
  installNuxtModule: (token: string, name: string, dry?: boolean) => Promise<InstallModuleReturn>;
  uninstallNuxtModule: (token: string, name: string, dry?: boolean) => Promise<InstallModuleReturn>;
  enableTimeline: (dry: boolean) => Promise<[string, string]>;

  // Dev Token
  requestForAuth: (info?: string, origin?: string) => Promise<void>;
  verifyAuthToken: (token: string) => Promise<boolean>;
}

interface ClientFunctions {
  refresh: (event: ClientUpdateEvent) => void;
  callHook: (hook: string, ...args: any[]) => Promise<void>;
  navigateTo: (path: string) => void;
  onTerminalData: (_: { id: string, data: string }) => void;
  onTerminalExit: (_: { id: string, code?: number }) => void;
}

type ClientUpdateEvent = keyof ServerFunctions;

interface PackageUpdateInfo {
  name: string;
  current: string;
  latest: string;
  needsUpdate: boolean;
}

type PackageManagerName = 'npm' | 'yarn' | 'pnpm' | 'bun';
type NpmCommandType = 'install' | 'uninstall' | 'update';

interface NpmCommandOptions {
  dev?: boolean;
  global?: boolean;
}

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

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

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

interface ElementTraceInfo {
  file?: string;
  line?: number;
  column?: number;
  name?: string;
  [key: string]: any;
}