fix(devtools): use vite plugin for env-specific config (#899)

Author: danielroe

local.ts

@@ -18,7 +18,7 @@ import type { ModuleOptions } from './packages/devtools/src/types'
  * })
  * ```
  */
-import { defineNuxtModule, logger } from '@nuxt/kit'
+import { defineNuxtModule, extendViteConfig, logger } from '@nuxt/kit'
 import { getPort } from 'get-port-please'
 import { resolve } from 'pathe'
 import { searchForWorkspaceRoot } from 'vite'
@@ -40,7 +40,7 @@ export default defineNuxtModule<ModuleOptions>({
     const workspaceRoot = resolve(packageDir, '../..')
     const PORT = await getPort({ port: 12442 })
 
-    nuxt.hook('vite:extendConfig', (config) => {
+    extendViteConfig((config) => {
       config.server ||= {}
       // add proxy to client
       config.server.proxy ||= {}

packages/devtools/client/modules/markdown.ts

@@ -1,5 +1,5 @@
 import type { BuiltinLanguage } from 'shiki'
-import { defineNuxtModule, logger } from '@nuxt/kit'
+import { defineNuxtModule, extendViteConfig, logger } from '@nuxt/kit'
 import { consola } from 'consola'
 import LinkAttributes from 'markdown-it-link-attributes'
 import { createHighlighter } from 'shiki'
@@ -24,7 +24,7 @@ export default defineNuxtModule({
 
     nuxt.options.extensions.push('.md')
 
-    nuxt.hook('vite:extendConfig', async (config) => {
+    extendViteConfig((config) => {
       config.plugins!.push(
         Markdown({
           async markdownItSetup(md) {

packages/devtools/src/module-main.ts

@@ -5,7 +5,7 @@ import type { ModuleOptions, NuxtDevToolsOptions } from './types'
 import { existsSync } from 'node:fs'
 import fs from 'node:fs/promises'
 import os from 'node:os'
-import { addPlugin, addTemplate, addVitePlugin, logger } from '@nuxt/kit'
+import { addImports, addPlugin, addTemplate, addVitePlugin, extendViteConfig, logger } from '@nuxt/kit'
 import { colors } from 'consola/utils'
 import { join } from 'pathe'
 import sirv from 'sirv'
@@ -110,7 +110,7 @@ window.__NUXT_DEVTOOLS_TIME_METRIC__.appInit = Date.now()
 
   const clientDirExists = existsSync(clientDir)
 
-  nuxt.hook('vite:extendConfig', (config) => {
+  extendViteConfig((config) => {
     config.server ||= {}
     config.server.fs ||= {}
     config.server.fs.allow ||= [
@@ -126,11 +126,9 @@ window.__NUXT_DEVTOOLS_TIME_METRIC__.appInit = Date.now()
     config.server.watch.ignored.push('**/.cache/nuxt-devtools/**')
   })
 
-  nuxt.hook('imports:extend', (imports) => {
-    imports.push({
-      name: 'useNuxtDevTools',
-      from: join(runtimeDir, 'use-nuxt-devtools'),
-    })
+  addImports({
+    name: 'useNuxtDevTools',
+    from: join(runtimeDir, 'use-nuxt-devtools'),
   })
 
   const ROUTE_PATH = `${nuxt.options.app.baseURL || '/'}/__nuxt_devtools__`.replace(/\/+/g, '/')

packages/devtools/src/server-rpc/server-data.ts

@@ -1,6 +1,7 @@
 import type { Nitro } from 'nitropack'
 import type { ResolvedConfig } from 'vite'
 import type { NuxtDevtoolsServerContext, ServerFunctions } from '../types'
+import { addVitePlugin } from '@nuxt/kit'
 
 export function setupServerDataRPC({
   nuxt,
@@ -32,27 +33,28 @@ export function setupServerDataRPC({
     nitro = _nitro
   })
 
-  nuxt.hook('vite:extendConfig', (vite, options) => {
-    if (options.isServer) {
-      vite.plugins ||= []
-      vite.plugins.push({
-        name: 'nuxt:devtools:config-retriever',
-        enforce: 'post',
-        configResolved(config) {
-          viteServer = normalizeViteConfig(config)
-        },
-      })
-    }
-    else if (options.isClient) {
-      vite.plugins ||= []
-      vite.plugins.push({
-        name: 'nuxt:devtools:config-retriever',
-        enforce: 'post',
-        configResolved(config) {
-          viteClient = normalizeViteConfig(config)
-        },
-      })
-    }
+  addVitePlugin({
+    name: 'nuxt:devtools:config',
+    applyToEnvironment(environment) {
+      if (environment.name === 'ssr') {
+        return {
+          name: 'nuxt:devtools:config-retriever',
+          enforce: 'post',
+          configResolved(config) {
+            viteServer = normalizeViteConfig(config)
+          },
+        }
+      }
+      if (environment.name === 'client') {
+        return {
+          name: 'nuxt:devtools:config-retriever',
+          enforce: 'post',
+          configResolved(config) {
+            viteClient = normalizeViteConfig(config)
+          },
+        }
+      }
+    },
   })
 
   return {