·
1 min read
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":
If you liked this Vue tip, follow me on BlueSky to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter :