fix(devtools): don't scope dock plugin with { server: false }

.gitignore

@@ -69,3 +69,4 @@ packages/devtools/client/public/discovery/index.html
 .context
 .claude
 .ghfs
+.omo

package.json

@@ -18,7 +18,7 @@
     "test:e2e:all": "pnpm test:e2e:prebuild && playwright test --config tests/e2e/playwright.config.ts",
     "test:e2e:dev": "PW_PROJECT='*:dev' playwright test --config tests/e2e/playwright.config.ts",
     "test:e2e:built": "pnpm test:e2e:prebuild && PW_PROJECT='*:built' playwright test --config tests/e2e/playwright.config.ts",
-    "test:e2e:prebuild": "pnpm -C playgrounds/empty exec nuxt build && pnpm -C playgrounds/tab-pinia exec nuxt build && pnpm -C playgrounds/tab-seo exec nuxt build",
+    "test:e2e:prebuild": "pnpm -C playgrounds/empty exec nuxt build && pnpm -C playgrounds/spa exec nuxt build && pnpm -C playgrounds/tab-pinia exec nuxt build && pnpm -C playgrounds/tab-seo exec nuxt build",
     "test:e2e:ui": "playwright test --config tests/e2e/playwright.config.ts --ui",
     "docs": "nuxi dev docs",
     "docs:build": "CI=true nuxi generate docs",

packages/devtools/src/module-main.ts

@@ -80,6 +80,11 @@ export async function enableModule(options: ModuleOptions, nuxt: Nuxt) {
   // Deferred: will be set when Vite DevTools plugin setup runs
   let connectDevToolsKit: ((ctx: any) => void) | undefined
 
+  // Do NOT pass `{ server: false }` here: under Nuxt 5 / Vite 8 the kit wraps
+  // the plugin in an `applyToEnvironment` shell that strips the `devtools`
+  // property, so `@vitejs/devtools` silently drops the dock entry. The
+  // original client-vs-server RPC race is already handled by the guard inside
+  // `connectDevToolsKit` (`if (devtoolsKitCtx) return`).
   addVitePlugin(defineViteDevToolsPlugin({
     name: 'nuxt:devtools',
     devtools: {
@@ -96,7 +101,7 @@ export async function enableModule(options: ModuleOptions, nuxt: Nuxt) {
         connectDevToolsKit?.(ctx)
       },
     },
-  }), { server: false })
+  }))
   addPlugin({
     src: join(runtimeDir, 'plugins/vite-devtools.client'),
     mode: 'client',

playgrounds/spa/.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

playgrounds/spa/app.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+function handleClick() {
+  // eslint-disable-next-line no-console
+  console.log('clicked')
+}
+</script>
+
+<template>
+  <h1>Hello (SPA mode)</h1>
+  <p>
+    This playground runs with <code>ssr: false</code>. The Nuxt DevTools dock
+    entry should still appear in Vite DevTools.
+  </p>
+  <button @click="handleClick">
+    Click me
+  </button>
+</template>
+
+<style>
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}
+</style>

playgrounds/spa/nuxt.config.ts

@@ -0,0 +1,23 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+const devtoolsModule = process.env.NUXT_DEVTOOLS_LOCAL ? '../../local' : '@nuxt/devtools'
+
+// Regression playground for the dock-missing bug. With `ssr: false` AND
+// `experimental.viteEnvironmentApi: true`, `@nuxt/kit`'s `addVitePlugin`
+// takes the `applyToEnvironment` wrapper branch (`config.environments` is
+// always populated). The wrapper plugin object lacks a `devtools` property,
+// so `@vitejs/devtools`'s `"devtools" in plugin` filter silently drops it
+// and the Nuxt DevTools dock entry never registers. This mirrors the Nuxt 5
+// vite-builder code path the bug was originally reported against.
+export default defineNuxtConfig({
+  modules: [
+    devtoolsModule,
+  ],
+
+  ssr: false,
+
+  experimental: {
+    viteEnvironmentApi: true,
+  },
+
+  compatibilityDate: '2024-09-19',
+})

playgrounds/spa/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "spa",
+  "version": "4.0.0-alpha.6",
+  "private": true,
+  "main": "nuxt.config.ts",
+  "files": [
+    "app.vue",
+    "components",
+    "nuxt.config.ts",
+    "pages",
+    "public"
+  ],
+  "scripts": {
+    "play:build": "nuxt build",
+    "play:dev": "nuxt dev",
+    "play:generate": "nuxt generate",
+    "play:preview": "nuxt preview"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:types",
+    "nuxt": "catalog:buildtools"
+  }
+}

playgrounds/spa/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

tests/e2e/playwright.config.ts

@@ -5,7 +5,7 @@ import { matchesProjectFilter } from './shared/glob'
 
 const REPO_ROOT = fileURLToPath(new URL('../..', import.meta.url))
 
-const PLAYGROUNDS = ['empty', 'tab-pinia', 'tab-seo'] as const
+const PLAYGROUNDS = ['empty', 'spa', 'tab-pinia', 'tab-seo'] as const
 const MODES = ['dev', 'built'] as const
 
 type Mode = typeof MODES[number]