fix: update devtools configuration for improved local dx

Author: arashsheyda

client/nuxt.config.ts

@@ -6,6 +6,9 @@ export default defineNuxtConfig({
     '@nuxt/devtools-ui-kit',
   ],
   ssr: false,
+  devtools: {
+    enabled: false,
+  },
   app: {
     baseURL: CLIENT_PATH,
   },
@@ -14,9 +17,6 @@ export default defineNuxtConfig({
     output: {
       publicDir: resolve(__dirname, '../dist/client'),
     },
-  },
-  vite: {
-
   },
   unocss: {
     shortcuts: {

package.json

@@ -50,7 +50,7 @@
     "dev": "nuxi dev playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare client && nuxi prepare playground",
     "dev:client": "nuxi dev client --port 3300",
-    "dev:prod": "pnpm run build && pnpm run dev",
+    "preview": "pnpm prepack && pnpm dev",
     "release": "pnpm run lint && pnpm run test && pnpm run build && changelogen --release && pnpm publish",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",

src/devtools.ts

@@ -1,5 +1,6 @@
 import { existsSync } from 'node:fs'
 import type { Nuxt } from 'nuxt/schema'
+import { extendViteConfig } from '@nuxt/kit'
 import type { Resolver } from '@nuxt/kit'
 import { extendServerRpc, onDevToolsInitialized, addCustomTab } from '@nuxt/devtools-kit'
 import type { ClientFunctions, ServerFunctions } from './types'
@@ -13,6 +14,7 @@ export function setupDevToolsUI(options: ModuleOptions, resolve: Resolver['resol
   const clientPath = resolve('./client')
   const isProductionBuild = existsSync(clientPath)
 
+  // serve production-built client (used when package is published)
   if (isProductionBuild) {
     nuxt.hook('vite:serverCreated', async (server) => {
       const sirv = await import('sirv').then(r => r.default || r)
@@ -22,8 +24,9 @@ export function setupDevToolsUI(options: ModuleOptions, resolve: Resolver['resol
       )
     })
   }
+  // in local development, proxy to dev server
   else {
-    nuxt.hook('vite:extendConfig', (config) => {
+    extendViteConfig((config) => {
       config.server = config.server || {}
       config.server.proxy = config.server.proxy || {}
       config.server.proxy[CLIENT_PATH] = {
@@ -45,7 +48,7 @@ export function setupDevToolsUI(options: ModuleOptions, resolve: Resolver['resol
     },
   })
 
-  const wsServer = useViteWebSocket(nuxt)
+  const wsServer = useViteWebSocket()
   onDevToolsInitialized(async () => {
     const rpcFunctions = setupRPC({ options, wsServer, nuxt })
 

src/utils/index.ts

@@ -1,8 +1,9 @@
 import type { WebSocketServer } from 'vite'
 import type { Nuxt } from 'nuxt/schema'
 import plrz from 'pluralize'
+import { useNuxt } from '@nuxt/kit'
 
-export function useViteWebSocket(nuxt: Nuxt) {
+export function useViteWebSocket(nuxt: Nuxt = useNuxt()) {
   return new Promise<WebSocketServer>((_resolve) => {
     nuxt.hooks.hook('vite:serverCreated', (viteServer) => {
       _resolve(viteServer.ws)