fix(devtools): run defineViteDevToolsPlugin only for client vite (#977)

Author: huang-julien

packages/devtools/src/module-main.ts

@@ -90,7 +90,7 @@ export async function enableModule(options: ModuleOptions, nuxt: Nuxt) {
         connectDevToolsKit?.(ctx)
       },
     },
-  }))
+  }), { server: false })
   addPlugin({
     src: join(runtimeDir, 'plugins/vite-devtools.client'),
     mode: 'client',

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

@@ -136,6 +136,13 @@ export function setupRPC(nuxt: Nuxt, options: ModuleOptions) {
    * Called from the Vite DevTools plugin setup callback.
    */
   function connectDevToolsKit(ctx: DevToolsNodeContext) {
+    /**
+     * guarded to keep the first connection (client Vite), since Nuxt creates
+     * two Vite instances and the second (server) one has 0 WebSocket clients.
+     * If we don't guard this, the server connection will overwrite the client connection and break all RPC calls from server to client.
+     */
+    if (devtoolsKitCtx)
+      return
     devtoolsKitCtx = ctx
     const host = ctx.rpc