Javascript is required
ยท
1 min read

Nuxt Tip: Add Custom iframe Tab to Nuxt DevTools

Nuxt Tip: Add Custom iframe Tab to Nuxt DevTools Image

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:

nuxt.config.ts
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":

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:

I will never share any of your personal data. You can unsubscribe at any time.