Module Configuration

/**
 * Nuxt DevTools module that provides development insights and debugging capabilities
 * Automatically disabled in production and test environments
 */
export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: '@nuxt/devtools',
    configKey: 'devtools',
  },
  defaults: defaultOptions,
  setup(options: ModuleOptions, nuxt: Nuxt): Promise<void> | void;
});

interface ModuleOptions {
  /** Enable DevTools (default: true) */
  enabled?: boolean;
  /** Custom tabs (static format - for dynamic injection use 'devtools:customTabs' hook) */
  customTabs?: ModuleCustomTab[];
  /** VS Code Server integration options */
  vscode?: VSCodeIntegrationOptions;
  /** Enable Vue Component Inspector (default: true) */
  componentInspector?: boolean;
  /** Enable Vue DevTools integration */
  vueDevTools?: boolean;
  /** Enable vite-plugin-inspect (default: true) */
  viteInspect?: boolean;
  /** Disable dev time authorization check (NOT RECOMMENDED) */
  disableAuthorization?: boolean;
  /** Props for the iframe element, useful for environment with stricter CSP */
  iframeProps?: Record<string, string | boolean>;
  /** Experimental features */
  experimental?: {
    /** Timeline tab (deprecated: use timeline.enabled instead) */
    timeline?: boolean;
  };
  /** Options for the timeline tab */
  timeline?: {
    /** Enable timeline tab (default: false) */
    enabled?: boolean;
    /** Track on function calls */
    functions?: {
      include?: (string | RegExp | ((item: Import) => boolean))[];
      /** Include from specific modules (default: ['#app', '@unhead/vue']) */
      includeFrom?: string[];
      exclude?: (string | RegExp | ((item: Import) => boolean))[];
    };
  };
  /** Options for assets tab */
  assets?: {
    /** Allowed file extensions for assets tab to upload (set to '*' to disable limitation) */
    uploadExtensions?: '*' | string[];
  };
  /** Enable anonymous telemetry, helping improve Nuxt DevTools */
  telemetry?: boolean;
}

interface Import {
  /** Import name */
  name: string;
  /** Module source */
  from: string;
  /** Additional import metadata from unimport */
  [key: string]: any;
}

interface VSCodeIntegrationOptions {
  /** Enable VS Code Server integration */
  enabled?: boolean;
  /** Start VS Code Server on boot (default: false) */
  startOnBoot?: boolean;
  /** Port to start VS Code Server (default: 3080) */
  port?: number;
  /** Reuse existing server if available (same port) */
  reuseExistingServer?: boolean;
  /** Determine whether to use code-server or vs code tunnel (default: 'local-serve') */
  mode?: 'local-serve' | 'tunnel';
  /** Options for VS Code tunnel */
  tunnel?: VSCodeTunnelOptions;
  /** Determines which binary and arguments to use for VS Code (default: 'ms-code-server') */
  codeServer?: CodeServerType;
  /** Host address to listen on. Unspecified by default. */
  host?: string;
}

interface VSCodeTunnelOptions {
  /** The machine name for port forwarding service (default: device hostname) */
  name?: string;
}

type CodeServerType = 'ms-code-cli' | 'ms-code-server' | 'coder-code-server';

interface ModuleGlobalOptions {
  /** List of projects to enable devtools for. Only works when devtools is installed globally. */
  projects?: string[];
}

const defaultOptions: ModuleOptions;

const WS_EVENT_NAME: string; // 'nuxt:devtools:rpc'

const defaultAllowedExtensions: string[]; // Asset file extensions

// Basic enablement
export default defineNuxtConfig({
  devtools: { enabled: true }
})

// Full configuration
export default defineNuxtConfig({
  devtools: {
    enabled: true,
    componentInspector: true,
    viteInspect: true,
    vscode: {
      enabled: true,
      startOnBoot: false,
      port: 3080,
      reuseExistingServer: true
    },
    disableAuthorization: false
  }
})

// Boolean shorthand (legacy)
export default defineNuxtConfig({
  devtools: true // equivalent to { enabled: true }
})

interface NuxtDevToolsOptions {
  behavior: {
    /** Telemetry setting (null = prompt user) */
    telemetry: boolean | null;
    /** Editor integration command */
    openInEditor?: string;
  };
  ui: {
    /** Components view mode */
    componentsView: 'list' | 'graph';
    /** Show node_modules in components graph */
    componentsGraphShowNodeModules: boolean;
    /** Show global components in graph */
    componentsGraphShowGlobalComponents: boolean;
    /** Show pages in components graph */
    componentsGraphShowPages: boolean;
    /** Show layouts in components graph */
    componentsGraphShowLayouts: boolean;
    /** Show workspace components in graph */
    componentsGraphShowWorkspace: boolean;
    /** Close interaction on outside click */
    interactionCloseOnOutsideClick: boolean;
    /** Show experimental features */
    showExperimentalFeatures: boolean;
    /** Show help buttons */
    showHelpButtons: boolean;
    /** Show devtools panel */
    showPanel: boolean;
    /** UI scale factor */
    scale: number;
    /** Auto-minimize panel after inactivity (ms) */
    minimizePanelInactive: number;
    /** Hidden tab names */
    hiddenTabs: string[];
    /** Pinned tab names */
    pinnedTabs: string[];
    /** Hidden tab categories */
    hiddenTabCategories: string[];
    /** Sidebar expanded state */
    sidebarExpanded: boolean;
    /** Sidebar scrollable behavior */
    sidebarScrollable: boolean;
  };
  serverRoutes: {
    /** Currently selected route */
    selectedRoute: string | null;
    /** Route view mode */
    view: 'tree' | 'list';
    /** Default input values for route testing */
    inputDefaults: {
      query: Array<{ key: string; value: string; active: boolean }>;
      body: Array<{ key: string; value: string; active: boolean }>;
      headers: Array<{ key: string; value: string; active: boolean }>;
    };
    /** Send requests from app or devtools */
    sendFrom: 'app' | 'devtools';
  };
  serverTasks: {
    /** Enable server tasks feature */
    enabled: boolean;
    /** Currently selected task */
    selectedTask: string | null;
    /** Task view mode */
    view: 'list' | 'tree';
    /** Default input values for task execution */
    inputDefaults: {
      query: Array<{ key: string; value: string; active: boolean }>;
      body: Array<{ key: string; value: string; active: boolean }>;
      headers: Array<{ key: string; value: string; active: boolean }>;
    };
  };
  assets: {
    /** Assets view mode */
    view: 'grid' | 'list';
  };
}

const defaultTabOptions: NuxtDevToolsOptions;