Nuxt DevTools is designed to be extensible and you can add your own modules' integration to it.
If you want to add your module as a new tab in Nuxt DevTools you need to serve your module's view and integrate it via iframe.
The first option to register your custom tab is to use the utility kit provided by Nuxt DevTools:
1import { addCustomTab } from '@nuxt/devtools-kit'
2
3addCustomTab({
4 // unique identifier
5 name: 'my-module',
6 // title to display in the tab
7 title: 'My Module',
8 // any icon from Iconify, or a URL to an image
9 icon: 'carbon:apps',
10 // iframe view
11 view: {
12 type: 'iframe',
13 src: '/url-to-your-module-view',
14 },
15})Alternatively, you can use Nuxt hooks:
1nuxt.hook('devtools:customTabs', (tabs) => {
2 tabs.push({
3 // unique identifier
4 name: 'my-module',
5 // title to display in the tab
6 title: 'My Module',
7 // any icon from Iconify, or a URL to an image
8 icon: 'carbon:apps',
9 // iframe view
10 view: {
11 type: 'iframe',
12 src: '/url-to-your-module-view',
13 },
14 })
15})Let's see it in action:
1export default defineNuxtConfig({
2 dev: {
3 enabled: true,
4 },
5 modules: [
6 '@nuxt/devtools',
7 (inlineOptions, nuxt) => {
8 nuxt.hook('devtools:customTabs', (tabs) => {
9 tabs.push({
10 name: 'doom',
11 title: 'Doom',
12 icon: 'carbon:apps',
13 view: {
14 type: 'iframe',
15 src: 'https://silentspacemarine.com/',
16 },
17 })
18 })
19 },
20 ],
21})If you now open the Nuxt DevTools you can find a new tab called "Doom":
If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:
Vue Tip: Debug Watcher
You can debug watchers by passing a third options object with onTrack and onTrigger callbacks.
Vue Tip: Detect Mouse Hover
You can use Vue event handlers to detect mouse hover events.