tessl/npm-nuxt--devtools

The Nuxt DevTools gives you insights and transparency about your Nuxt App.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Runtime Composables

Name: tessl/npm-nuxt--devtools
Author: tessl

Runtime utilities for accessing devtools functionality within Nuxt applications during development mode.

Capabilities

useNuxtDevTools

Vue composable that provides access to the devtools host client for runtime interaction.

/**
 * Get Nuxt DevTools client for host app
 * Returns undefined if not in development mode or devtools is not enabled
 * @returns Reactive reference to devtools host client
 */
function useNuxtDevTools(): Ref<NuxtDevtoolsHostClient | undefined>;

Usage Examples:

// Auto-imported when devtools module is enabled
export default defineComponent({
  setup() {
    const devtools = useNuxtDevTools();
    
    // Check if devtools is available
    watchEffect(() => {
      if (devtools.value) {
        console.log('DevTools client is available');
        // Access RPC methods for communication
      } else {
        console.log('DevTools not available (production or disabled)');
      }
    });
    
    return {
      devtools
    };
  }
});

// In a composable
export function useCustomDevtoolsIntegration() {
  const devtools = useNuxtDevTools();
  
  const sendData = (data: any) => {
    if (devtools.value) {
      // Send data to devtools interface
      devtools.value.rpc?.call('custom:sendData', data);
    }
  };
  
  return { sendData };
}

DevTools Host Client Interface

The client interface exposed through useNuxtDevTools for runtime communication.

interface NuxtDevtoolsHostClient {
  /** RPC communication interface */
  rpc?: {
    /** Call remote procedure on devtools */
    call(method: string, ...args: any[]): Promise<any>;
    /** Listen for events from devtools */
    on(event: string, handler: (...args: any[]) => void): void;
    /** Remove event listener */
    off(event: string, handler: (...args: any[]) => void): void;
  };
  
  /** DevTools metadata */
  version?: string;
  
  /** Additional client methods (implementation-specific) */
  [key: string]: any;
}

Runtime Availability

The composable handles different runtime contexts automatically:

Development Mode: Full functionality when devtools is enabled
Production Mode: Always returns undefined
Server-Side: Always returns undefined (client-only)
Disabled DevTools: Returns undefined when devtools is explicitly disabled

Implementation Details:

// The composable uses window.__NUXT_DEVTOOLS_HOST__ for client access
// and automatically handles reactive updates when devtools connects

// Internal implementation pattern:
if (!import.meta.dev) return shallowRef(); // Production
if (import.meta.server) return shallowRef(); // Server-side

// Client-side reactive connection to devtools host
const client = shallowRef<NuxtDevtoolsHostClient | undefined>();

if (window.__NUXT_DEVTOOLS_HOST__) {
  client.value = window.__NUXT_DEVTOOLS_HOST__;
} else {
  // Setup reactive property for when devtools connects
  Object.defineProperty(window, '__NUXT_DEVTOOLS_HOST__', {
    set(value) { client.value = value; },
    get() { return client.value; }
  });
}

DevTools Kit Runtime Composables

Additional runtime utilities from the @nuxt/devtools-kit package for advanced usage.

/**
 * Get DevTools host client directly from kit package
 * Equivalent to useNuxtDevTools but from devtools-kit
 * @returns Reactive reference to devtools host client
 */
function useDevtoolsHostClient(): Ref<NuxtDevtoolsHostClient | undefined>;

/**
 * Get DevTools iframe client for custom devtools interfaces
 * Used for creating custom devtools UI components
 * @returns Reactive reference to devtools iframe client
 */
function useDevtoolsClient(): Ref<NuxtDevtoolsIframeClient | undefined>;

/**
 * Register callback for when DevTools host client connects
 * @param fn - Callback function receiving the connected client
 * @returns Cleanup function to remove the listener
 */
function onDevtoolsHostClientConnected(
  fn: (client: NuxtDevtoolsHostClient) => void
): (() => void) | undefined;

/**
 * Register callback for when DevTools iframe client connects
 * @param fn - Callback function receiving the connected client
 * @returns Cleanup function to remove the listener
 */
function onDevtoolsClientConnected(
  fn: (client: NuxtDevtoolsIframeClient) => void
): (() => void) | undefined;

Usage Examples:

import { useDevtoolsHostClient, onDevtoolsHostClientConnected } from "@nuxt/devtools-kit/host-client";
import { useDevtoolsClient, onDevtoolsClientConnected } from "@nuxt/devtools-kit/iframe-client";

// Using host client composable
export function useCustomDevtoolsIntegration() {
  const hostClient = useDevtoolsHostClient();
  
  const sendMetrics = (data: any) => {
    if (hostClient.value) {
      hostClient.value.rpc?.call('custom:metrics', data);
    }
  };
  
  return { sendMetrics };
}

// Using connection hooks
onDevtoolsHostClientConnected((client) => {
  console.log('Host client connected:', client);
  
  // Setup custom RPC handlers
  client.rpc?.on('custom:request', (data) => {
    console.log('Received custom request:', data);
  });
});

// Using iframe client for custom devtools UI
onDevtoolsClientConnected((client) => {
  console.log('Iframe client connected:', client);
  
  // Access host through iframe client
  if (client.host) {
    client.host.hooks.hook('host:update:reactivity', () => {
      // Handle reactivity updates
    });
  }
});

DevTools Client Interfaces

interface NuxtDevtoolsIframeClient {
  /** Host client interface when available */
  host?: NuxtDevtoolsHostClient;
  /** Additional iframe-specific methods */
  [key: string]: any;
}

Install with Tessl CLI