Nuxt Tip: Add Custom iframe Tab to Nuxt DevTools
Michael Hoffmann
Jun 1, 2023
| 1 min read
| - views
Michael Hoffmann
Jun 1, 2023
1 min read
| - views
Nuxt
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:
1
import { addCustomTab } from '@nuxt/devtools-kit'
2
3
addCustomTab({
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:
1
nuxt.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:
1
export 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 Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter:
New Vue & Nuxt tips delivered to your inbox: