0
# Web Components
1
2
Standalone Vue custom elements for embedding devtools UI components directly into web applications outside of the Nuxt framework context.
3
4
## Capabilities
5
6
### NuxtDevtoolsFrame
7
8
Custom element for embedding the complete devtools interface as a frame component.
9
10
```typescript { .api }
11
/**
12
* Vue custom element constructor for devtools frame
13
* Registers as <nuxt-devtools-frame> custom element
14
*/
15
const NuxtDevtoolsFrame: VueElementConstructor;
16
17
// Automatically registered custom element
18
customElements.define('nuxt-devtools-frame', NuxtDevtoolsFrame);
19
```
20
21
**Usage Examples:**
22
23
```html
24
<!-- Direct HTML usage -->
25
<nuxt-devtools-frame></nuxt-devtools-frame>
26
27
<!-- With attributes (implementation-specific) -->
28
<nuxt-devtools-frame
29
src="/devtools"
30
width="100%"
31
height="600px">
32
</nuxt-devtools-frame>
33
```
34
35
```typescript
36
// Programmatic usage
37
import { NuxtDevtoolsFrame } from "@nuxt/devtools/webcomponents";
38
39
// Create and append to DOM
40
const frame = new NuxtDevtoolsFrame();
41
document.body.appendChild(frame);
42
```
43
44
### NuxtDevtoolsInspectPanel
45
46
Custom element for the component inspection panel interface.
47
48
```typescript { .api }
49
/**
50
* Vue custom element constructor for inspection panel
51
* Provides component inspection capabilities
52
*/
53
const NuxtDevtoolsInspectPanel: VueElementConstructor;
54
```
55
56
**Usage Examples:**
57
58
```html
59
<!-- Inspection panel with mouse tracking -->
60
<nuxt-devtools-inspect-panel
61
:mouse="{ x: 100, y: 200 }"
62
:hasParent="true">
63
</nuxt-devtools-inspect-panel>
64
```
65
66
```typescript
67
// Programmatic creation with props
68
import { NuxtDevtoolsInspectPanel } from "@nuxt/devtools/webcomponents";
69
70
const panel = new NuxtDevtoolsInspectPanel({
71
mouse: { x: 150, y: 250 },
72
hasParent: false,
73
matched: elementTraceInfo
74
});
75
76
document.getElementById('inspector-container')?.appendChild(panel);
77
```
78
79
### Inspector Props Interface
80
81
Properties interface for the inspect panel component.
82
83
```typescript { .api }
84
interface NuxtDevToolsInspectorProps {
85
/** Element trace information from vite-plugin-vue-tracer */
86
matched?: ElementTraceInfo;
87
/** Whether the inspected element has a parent element */
88
hasParent?: boolean;
89
/** Current mouse position for positioning the inspector */
90
mouse: { x: number; y: number };
91
}
92
93
interface ElementTraceInfo {
94
/** File path where component is defined */
95
file?: string;
96
/** Line number in source file */
97
line?: number;
98
/** Column number in source file */
99
column?: number;
100
/** Component name */
101
name?: string;
102
/** Additional trace data from vite-plugin-vue-tracer */
103
[key: string]: any;
104
}
105
```
106
107
### Web Component Features
108
109
Both web components are built with the following characteristics:
110
111
- **Shadow Root**: Encapsulated styling that doesn't affect parent page
112
- **Embedded CSS**: Self-contained styling for consistent appearance
113
- **Vue 3 Integration**: Built using Vue's `defineCustomElement` API
114
- **Type Safety**: Full TypeScript support for props and events
115
116
**Technical Implementation:**
117
118
```typescript
119
// Both components use defineCustomElement with shadow root
120
import { defineCustomElement } from 'vue';
121
import css from '../.generated/css';
122
import Component from './ComponentName.vue';
123
124
export const CustomElement = defineCustomElement(Component, {
125
shadowRoot: true,
126
styles: [css]
127
}) as VueElementConstructor;
128
129
// Automatic registration
130
customElements.define('element-name', CustomElement);
131
```
132
133
### Integration with External Applications
134
135
The web components can be integrated into any web application:
136
137
```html
138
<!-- In any HTML page -->
139
<!DOCTYPE html>
140
<html>
141
<head>
142
<script type="module">
143
import { NuxtDevtoolsFrame } from 'https://unpkg.com/@nuxt/devtools/webcomponents';
144
</script>
145
</head>
146
<body>
147
<nuxt-devtools-frame></nuxt-devtools-frame>
148
</body>
149
</html>
150
```
151
152
```javascript
153
// In React applications
154
import { NuxtDevtoolsFrame } from "@nuxt/devtools/webcomponents";
155
156
function App() {
157
useEffect(() => {
158
// Web components work directly in React
159
}, []);
160
161
return <nuxt-devtools-frame />;
162
}
163
164
// In Angular applications
165
import { NuxtDevtoolsFrame } from "@nuxt/devtools/webcomponents";
166
167
@Component({
168
template: '<nuxt-devtools-frame></nuxt-devtools-frame>'
169
})
170
export class DevtoolsComponent {}
171
```