feat(module): devtools integration (#2196)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/module.ts

@@ -1,6 +1,10 @@
 import { defu } from 'defu'
-import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, addVitePlugin, addPlugin, installModule, hasNuxtModule } from '@nuxt/kit'
-import { addTemplates } from './templates'
+import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, addVitePlugin, addPlugin, installModule, extendPages, hasNuxtModule } from '@nuxt/kit'
+import { addTemplates, buildTemplates } from './templates'
+import { addCustomTab, startSubprocess } from '@nuxt/devtools-kit'
+import sirv from 'sirv'
+import { getPort } from 'get-port-please'
+import { devtoolsMetaPlugin } from './devtools/meta'
 import { defaultOptions, getDefaultUiConfig, resolveColors } from './defaults'
 
 export type * from './runtime/types'
@@ -46,6 +50,17 @@ export interface ModuleOptions {
      */
     transitions?: boolean
   }
+
+  /**
+   * Configuration for the Nuxt UI devtools.
+   */
+  devtools?: {
+    /**
+     * Enable or disable Nuxt UI devtools.
+     * @defaultValue `true`
+     */
+    enabled?: boolean
+  }
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -58,6 +73,7 @@ export default defineNuxtModule<ModuleOptions>({
     docs: 'https://ui3.nuxt.dev/getting-started/installation'
   },
   defaults: defaultOptions,
+
   async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url)
 
@@ -110,5 +126,77 @@ export default defineNuxtModule<ModuleOptions>({
     addImportsDir(resolve('./runtime/composables'))
 
     addTemplates(options, nuxt)
+
+    if (nuxt.options.dev && nuxt.options.devtools.enabled && options.devtools?.enabled) {
+      const templates = buildTemplates(options)
+      nuxt.options.vite = defu(nuxt.options?.vite, { plugins: [devtoolsMetaPlugin({ resolve, templates, options })] })
+
+      // Runs UI devtools in a subprocess for local development
+      if (process.env.NUXT_UI_DEVTOOLS_LOCAL) {
+        const PORT = await getPort({ port: 42124 })
+        nuxt.hook('app:resolve', () => {
+          startSubprocess(
+            {
+              command: 'pnpm',
+              args: ['nuxi', 'dev'],
+              cwd: './devtools',
+              stdio: 'pipe',
+              env: {
+                PORT: PORT.toString()
+              }
+            },
+            {
+              id: 'ui:devtools:local',
+              name: 'Nuxt UI DevTools Local',
+              icon: 'logos-nuxt-icon'
+            },
+            nuxt
+          )
+        })
+
+        nuxt.hook('vite:extendConfig', (config) => {
+          config.server ||= {}
+          config.server.proxy ||= {}
+          config.server.proxy['/__nuxt_ui__/devtools'] = {
+            target: `http://localhost:${PORT}`,
+            changeOrigin: true,
+            followRedirects: true,
+            ws: true,
+            rewriteWsOrigin: true
+          }
+        })
+      } else {
+        nuxt.hook('vite:serverCreated', async (server) => {
+          server.middlewares.use('/__nuxt_ui__/devtools', sirv(resolve('../dist/client/devtools'), {
+            single: true,
+            dev: true
+          }))
+        })
+      }
+
+      nuxt.options.routeRules = defu(nuxt.options.routeRules, { '/__nuxt_ui__/**': { ssr: false } })
+      extendPages((pages) => {
+        pages.unshift({
+          name: 'ui-devtools',
+          path: '/__nuxt_ui__/components/:slug',
+          file: resolve('./devtools/runtime/DevtoolsRenderer.vue'),
+          meta: {
+            // https://github.com/nuxt/nuxt/pull/29366
+            //   isolate: true
+            layout: false
+          }
+        })
+      })
+
+      addCustomTab({
+        name: 'nuxt-ui',
+        title: 'Nuxt UI',
+        icon: '/__nuxt_ui__/devtools/favicon.svg',
+        view: {
+          type: 'iframe',
+          src: '/__nuxt_ui__/devtools'
+        }
+      })
+    }
   }
 })