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

Web Components

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

Standalone Vue custom elements for embedding devtools UI components directly into web applications outside of the Nuxt framework context.

Capabilities

NuxtDevtoolsFrame

Custom element for embedding the complete devtools interface as a frame component.

/**
 * Vue custom element constructor for devtools frame
 * Registers as <nuxt-devtools-frame> custom element
 */
const NuxtDevtoolsFrame: VueElementConstructor;

// Automatically registered custom element
customElements.define('nuxt-devtools-frame', NuxtDevtoolsFrame);

Usage Examples:

<!-- Direct HTML usage -->
<nuxt-devtools-frame></nuxt-devtools-frame>

<!-- With attributes (implementation-specific) -->
<nuxt-devtools-frame 
  src="/devtools" 
  width="100%" 
  height="600px">
</nuxt-devtools-frame>

// Programmatic usage
import { NuxtDevtoolsFrame } from "@nuxt/devtools/webcomponents";

// Create and append to DOM
const frame = new NuxtDevtoolsFrame();
document.body.appendChild(frame);

NuxtDevtoolsInspectPanel

Custom element for the component inspection panel interface.

/**
 * Vue custom element constructor for inspection panel
 * Provides component inspection capabilities
 */
const NuxtDevtoolsInspectPanel: VueElementConstructor;

Usage Examples:

<!-- Inspection panel with mouse tracking -->
<nuxt-devtools-inspect-panel
  :mouse="{ x: 100, y: 200 }"
  :hasParent="true">
</nuxt-devtools-inspect-panel>

// Programmatic creation with props
import { NuxtDevtoolsInspectPanel } from "@nuxt/devtools/webcomponents";

const panel = new NuxtDevtoolsInspectPanel({
  mouse: { x: 150, y: 250 },
  hasParent: false,
  matched: elementTraceInfo
});

document.getElementById('inspector-container')?.appendChild(panel);

Inspector Props Interface

Properties interface for the inspect panel component.

interface NuxtDevToolsInspectorProps {
  /** Element trace information from vite-plugin-vue-tracer */
  matched?: ElementTraceInfo;
  /** Whether the inspected element has a parent element */
  hasParent?: boolean;
  /** Current mouse position for positioning the inspector */
  mouse: { x: number; y: number };
}

interface ElementTraceInfo {
  /** File path where component is defined */
  file?: string;
  /** Line number in source file */
  line?: number;
  /** Column number in source file */
  column?: number;
  /** Component name */
  name?: string;
  /** Additional trace data from vite-plugin-vue-tracer */
  [key: string]: any;
}

Web Component Features

Both web components are built with the following characteristics:

Shadow Root: Encapsulated styling that doesn't affect parent page
Embedded CSS: Self-contained styling for consistent appearance
Vue 3 Integration: Built using Vue's defineCustomElement API
Type Safety: Full TypeScript support for props and events

Technical Implementation:

// Both components use defineCustomElement with shadow root
import { defineCustomElement } from 'vue';
import css from '../.generated/css';
import Component from './ComponentName.vue';

export const CustomElement = defineCustomElement(Component, {
  shadowRoot: true,
  styles: [css]
}) as VueElementConstructor;

// Automatic registration
customElements.define('element-name', CustomElement);

Integration with External Applications

The web components can be integrated into any web application:

<!-- In any HTML page -->
<!DOCTYPE html>
<html>
<head>
  <script type="module">
    import { NuxtDevtoolsFrame } from 'https://unpkg.com/@nuxt/devtools/webcomponents';
  </script>
</head>
<body>
  <nuxt-devtools-frame></nuxt-devtools-frame>
</body>
</html>

// In React applications
import { NuxtDevtoolsFrame } from "@nuxt/devtools/webcomponents";

function App() {
  useEffect(() => {
    // Web components work directly in React
  }, []);
  
  return <nuxt-devtools-frame />;
}

// In Angular applications
import { NuxtDevtoolsFrame } from "@nuxt/devtools/webcomponents";

@Component({
  template: '<nuxt-devtools-frame></nuxt-devtools-frame>'
})
export class DevtoolsComponent {}

Install with Tessl CLI