0
# Module Configuration
1
2
Core Nuxt module configuration for integrating devtools into applications with extensive customization options for development workflow.
3
4
## Capabilities
5
6
### Module Definition
7
8
The main Nuxt module that integrates devtools functionality.
9
10
```typescript { .api }
11
/**
12
* Nuxt DevTools module that provides development insights and debugging capabilities
13
* Automatically disabled in production and test environments
14
*/
15
export default defineNuxtModule<ModuleOptions>({
16
meta: {
17
name: '@nuxt/devtools',
18
configKey: 'devtools',
19
},
20
defaults: defaultOptions,
21
setup(options: ModuleOptions, nuxt: Nuxt): Promise<void> | void;
22
});
23
```
24
25
### Module Options Configuration
26
27
Complete configuration interface for customizing devtools behavior.
28
29
```typescript { .api }
30
interface ModuleOptions {
31
/** Enable DevTools (default: true) */
32
enabled?: boolean;
33
/** Custom tabs (static format - for dynamic injection use 'devtools:customTabs' hook) */
34
customTabs?: ModuleCustomTab[];
35
/** VS Code Server integration options */
36
vscode?: VSCodeIntegrationOptions;
37
/** Enable Vue Component Inspector (default: true) */
38
componentInspector?: boolean;
39
/** Enable Vue DevTools integration */
40
vueDevTools?: boolean;
41
/** Enable vite-plugin-inspect (default: true) */
42
viteInspect?: boolean;
43
/** Disable dev time authorization check (NOT RECOMMENDED) */
44
disableAuthorization?: boolean;
45
/** Props for the iframe element, useful for environment with stricter CSP */
46
iframeProps?: Record<string, string | boolean>;
47
/** Experimental features */
48
experimental?: {
49
/** Timeline tab (deprecated: use timeline.enabled instead) */
50
timeline?: boolean;
51
};
52
/** Options for the timeline tab */
53
timeline?: {
54
/** Enable timeline tab (default: false) */
55
enabled?: boolean;
56
/** Track on function calls */
57
functions?: {
58
include?: (string | RegExp | ((item: Import) => boolean))[];
59
/** Include from specific modules (default: ['#app', '@unhead/vue']) */
60
includeFrom?: string[];
61
exclude?: (string | RegExp | ((item: Import) => boolean))[];
62
};
63
};
64
/** Options for assets tab */
65
assets?: {
66
/** Allowed file extensions for assets tab to upload (set to '*' to disable limitation) */
67
uploadExtensions?: '*' | string[];
68
};
69
/** Enable anonymous telemetry, helping improve Nuxt DevTools */
70
telemetry?: boolean;
71
}
72
73
interface Import {
74
/** Import name */
75
name: string;
76
/** Module source */
77
from: string;
78
/** Additional import metadata from unimport */
79
[key: string]: any;
80
}
81
```
82
83
### VS Code Integration Options
84
85
Configuration for integrating with VS Code development server.
86
87
```typescript { .api }
88
interface VSCodeIntegrationOptions {
89
/** Enable VS Code Server integration */
90
enabled?: boolean;
91
/** Start VS Code Server on boot (default: false) */
92
startOnBoot?: boolean;
93
/** Port to start VS Code Server (default: 3080) */
94
port?: number;
95
/** Reuse existing server if available (same port) */
96
reuseExistingServer?: boolean;
97
/** Determine whether to use code-server or vs code tunnel (default: 'local-serve') */
98
mode?: 'local-serve' | 'tunnel';
99
/** Options for VS Code tunnel */
100
tunnel?: VSCodeTunnelOptions;
101
/** Determines which binary and arguments to use for VS Code (default: 'ms-code-server') */
102
codeServer?: CodeServerType;
103
/** Host address to listen on. Unspecified by default. */
104
host?: string;
105
}
106
107
interface VSCodeTunnelOptions {
108
/** The machine name for port forwarding service (default: device hostname) */
109
name?: string;
110
}
111
112
type CodeServerType = 'ms-code-cli' | 'ms-code-server' | 'coder-code-server';
113
```
114
115
### Global Module Options
116
117
Configuration for global devtools installation across multiple projects.
118
119
```typescript { .api }
120
interface ModuleGlobalOptions {
121
/** List of projects to enable devtools for. Only works when devtools is installed globally. */
122
projects?: string[];
123
}
124
```
125
126
### Default Configuration Values
127
128
Built-in default options for the module.
129
130
```typescript { .api }
131
const defaultOptions: ModuleOptions;
132
133
const WS_EVENT_NAME: string; // 'nuxt:devtools:rpc'
134
135
const defaultAllowedExtensions: string[]; // Asset file extensions
136
```
137
138
**Usage Examples:**
139
140
```typescript
141
// Basic enablement
142
export default defineNuxtConfig({
143
devtools: { enabled: true }
144
})
145
146
// Full configuration
147
export default defineNuxtConfig({
148
devtools: {
149
enabled: true,
150
componentInspector: true,
151
viteInspect: true,
152
vscode: {
153
enabled: true,
154
startOnBoot: false,
155
port: 3080,
156
reuseExistingServer: true
157
},
158
disableAuthorization: false
159
}
160
})
161
162
// Boolean shorthand (legacy)
163
export default defineNuxtConfig({
164
devtools: true // equivalent to { enabled: true }
165
})
166
```
167
168
### Client UI Configuration
169
170
Configuration options for the devtools client interface appearance and behavior.
171
172
```typescript { .api }
173
interface NuxtDevToolsOptions {
174
behavior: {
175
/** Telemetry setting (null = prompt user) */
176
telemetry: boolean | null;
177
/** Editor integration command */
178
openInEditor?: string;
179
};
180
ui: {
181
/** Components view mode */
182
componentsView: 'list' | 'graph';
183
/** Show node_modules in components graph */
184
componentsGraphShowNodeModules: boolean;
185
/** Show global components in graph */
186
componentsGraphShowGlobalComponents: boolean;
187
/** Show pages in components graph */
188
componentsGraphShowPages: boolean;
189
/** Show layouts in components graph */
190
componentsGraphShowLayouts: boolean;
191
/** Show workspace components in graph */
192
componentsGraphShowWorkspace: boolean;
193
/** Close interaction on outside click */
194
interactionCloseOnOutsideClick: boolean;
195
/** Show experimental features */
196
showExperimentalFeatures: boolean;
197
/** Show help buttons */
198
showHelpButtons: boolean;
199
/** Show devtools panel */
200
showPanel: boolean;
201
/** UI scale factor */
202
scale: number;
203
/** Auto-minimize panel after inactivity (ms) */
204
minimizePanelInactive: number;
205
/** Hidden tab names */
206
hiddenTabs: string[];
207
/** Pinned tab names */
208
pinnedTabs: string[];
209
/** Hidden tab categories */
210
hiddenTabCategories: string[];
211
/** Sidebar expanded state */
212
sidebarExpanded: boolean;
213
/** Sidebar scrollable behavior */
214
sidebarScrollable: boolean;
215
};
216
serverRoutes: {
217
/** Currently selected route */
218
selectedRoute: string | null;
219
/** Route view mode */
220
view: 'tree' | 'list';
221
/** Default input values for route testing */
222
inputDefaults: {
223
query: Array<{ key: string; value: string; active: boolean }>;
224
body: Array<{ key: string; value: string; active: boolean }>;
225
headers: Array<{ key: string; value: string; active: boolean }>;
226
};
227
/** Send requests from app or devtools */
228
sendFrom: 'app' | 'devtools';
229
};
230
serverTasks: {
231
/** Enable server tasks feature */
232
enabled: boolean;
233
/** Currently selected task */
234
selectedTask: string | null;
235
/** Task view mode */
236
view: 'list' | 'tree';
237
/** Default input values for task execution */
238
inputDefaults: {
239
query: Array<{ key: string; value: string; active: boolean }>;
240
body: Array<{ key: string; value: string; active: boolean }>;
241
headers: Array<{ key: string; value: string; active: boolean }>;
242
};
243
};
244
assets: {
245
/** Assets view mode */
246
view: 'grid' | 'list';
247
};
248
}
249
250
const defaultTabOptions: NuxtDevToolsOptions;
251
```