Nuxt Tip: Add Custom iframe Tab to Nuxt DevTools

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:

import { addCustomTab } from '@nuxt/devtools-kit' addCustomTab({ // unique identifier name: 'my-module', // title to display in the tab title: 'My Module', // any icon from Iconify, or a URL to an image icon: 'carbon:apps', // iframe view view: { type: 'iframe', src: '/url-to-your-module-view', }, })

Alternatively, you can use Nuxt hooks:

nuxt.hook('devtools:customTabs', (tabs) => { tabs.push({ // unique identifier name: 'my-module', // title to display in the tab title: 'My Module', // any icon from Iconify, or a URL to an image icon: 'carbon:apps', // iframe view view: { type: 'iframe', src: '/url-to-your-module-view', }, }) })

Let's see it in action:

nuxt.config.ts

export default defineNuxtConfig({ dev: { enabled: true, }, modules: [ '@nuxt/devtools', (inlineOptions, nuxt) => { nuxt.hook('devtools:customTabs', (tabs) => { tabs.push({ name: 'doom', title: 'Doom', icon: 'carbon:apps', view: { type: 'iframe', src: 'https://silentspacemarine.com/', }, }) }) }, ], })

If you now open the Nuxt DevTools you can find a new tab called "Doom":

Custom Nuxt DevTools Tab

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.