From 3e5251cb1be4c4adf6cc4affacab390fa4a3eaef Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Sun, 16 Feb 2025 15:14:17 +0800
Subject: [PATCH] feat: option to disable `vueDevTools`

---
 packages/devtools-kit/src/_types/options.ts      |  5 +++++
 packages/devtools/client/app.vue                 |  3 ---
 packages/devtools/client/pages/modules/pinia.vue | 11 ++++++-----
 .../client/pages/modules/render-tree.vue         | 14 ++++++++------
 packages/devtools/client/setup/vue-devtools.ts   | 16 +++++++++++++---
 packages/devtools/src/module-main.ts             |  3 ++-
 6 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/packages/devtools-kit/src/_types/options.ts b/packages/devtools-kit/src/_types/options.ts
index 8f461e1eb0..72ce1708ef 100644
--- a/packages/devtools-kit/src/_types/options.ts
+++ b/packages/devtools-kit/src/_types/options.ts
@@ -32,6 +32,11 @@ export interface ModuleOptions {
    */
   componentInspector?: boolean | VitePluginInspectorOptions
 
+  /**
+   * Enable Vue DevTools integration
+   */
+  vueDevTools?: boolean
+
   /**
    * Enable vite-plugin-inspect
    *
diff --git a/packages/devtools/client/app.vue b/packages/devtools/client/app.vue
index 92d5582cb0..9b581d87fc 100644
--- a/packages/devtools/client/app.vue
+++ b/packages/devtools/client/app.vue
@@ -12,7 +12,6 @@ import { splitScreenAvailable, splitScreenEnabled } from '~/composables/storage'
 import { useSchemaInput } from './composables/state-schema'
 import { useDevToolsOptions } from './composables/storage-options'
 import { setupClientRPC } from './setup/client-rpc'
-import { setupVueDevTools } from './setup/vue-devtools'
 
 import 'floating-vue/dist/style.css'
 import '@vue/devtools-applet/style.css'
@@ -39,8 +38,6 @@ useHead({
     },
   ],
 })
-
-setupVueDevTools()
 setupClientRPC()
 
 const client = useClient()
diff --git a/packages/devtools/client/pages/modules/pinia.vue b/packages/devtools/client/pages/modules/pinia.vue
index 9e2e3860f6..8f7b7f47ad 100644
--- a/packages/devtools/client/pages/modules/pinia.vue
+++ b/packages/devtools/client/pages/modules/pinia.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import { definePageMeta } from '#imports'
 import { Pinia } from '@vue/devtools-applet'
-import { useDevToolsState as useVueDevToolsState } from '@vue/devtools-core'
-import { useServerConfig } from '~/composables/state'
-
-const { connected } = useVueDevToolsState()
+import { useModuleOptions, useServerConfig } from '~/composables/state'
+import { useVueDevToolsState } from '~/setup/vue-devtools'
 
 definePageMeta({
   icon: 'i-logos-pinia',
@@ -13,9 +11,12 @@ definePageMeta({
   category: 'vue-devtools',
   show() {
     const configs = useServerConfig()
-    return () => configs.value?.modules?.some(item => (item as string | Array<unknown>)?.includes('@pinia/nuxt'))
+    const options = useModuleOptions()
+    return () => options.value?.vueDevTools !== false && configs.value?.modules?.some(item => (item as string | Array<unknown>)?.includes('@pinia/nuxt'))
   },
 })
+
+const { connected } = useVueDevToolsState()
 </script>
 
 <template>
diff --git a/packages/devtools/client/pages/modules/render-tree.vue b/packages/devtools/client/pages/modules/render-tree.vue
index 8bbb771e07..4be8b9b865 100644
--- a/packages/devtools/client/pages/modules/render-tree.vue
+++ b/packages/devtools/client/pages/modules/render-tree.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
 import { definePageMeta } from '#imports'
 import { Components as VueComponents } from '@vue/devtools-applet'
-import { useDevToolsState as useVueDevToolsState } from '@vue/devtools-core'
 import { useClient } from '~/composables/client'
 import { useOpenInEditor } from '~/composables/editor'
-
-const { connected } = useVueDevToolsState()
-const client = useClient()
-const openInEditor = useOpenInEditor()
+import { useModuleOptions } from '~/composables/state'
+import { useVueDevToolsState } from '~/setup/vue-devtools'
 
 definePageMeta({
   icon: 'i-carbon-category',
@@ -15,12 +12,17 @@ definePageMeta({
   layout: 'full',
   show: () => {
     const client = useClient()
-    return () => !!client.value
+    const options = useModuleOptions()
+    return () => options.value?.vueDevTools !== false && !!client.value
   },
   order: 1,
   category: 'vue-devtools',
 })
 
+const { connected } = useVueDevToolsState()
+const client = useClient()
+const openInEditor = useOpenInEditor()
+
 function togglePanel(status: boolean) {
   if (status)
     client.value.devtools.open()
diff --git a/packages/devtools/client/setup/vue-devtools.ts b/packages/devtools/client/setup/vue-devtools.ts
index 344bb84edc..de3102ce4d 100644
--- a/packages/devtools/client/setup/vue-devtools.ts
+++ b/packages/devtools/client/setup/vue-devtools.ts
@@ -1,10 +1,20 @@
-import { functions, onRpcConnected, rpc, useDevToolsState as useVueDevToolsState } from '@vue/devtools-core'
+import { functions, onRpcConnected, rpc, useDevToolsState } from '@vue/devtools-core'
 import { createRpcClient } from '@vue/devtools-kit'
 import { watchEffect } from 'vue'
 import { useDevToolsFrameState } from '../composables/storage'
 
-export function setupVueDevTools() {
-  const { connected } = useVueDevToolsState()
+let initiated = false
+
+export function useVueDevToolsState() {
+  ensureVueDevTools()
+  return useDevToolsState()
+}
+
+export function ensureVueDevTools() {
+  if (initiated)
+    return
+  initiated = true
+  const { connected } = useDevToolsState()
 
   const state = useDevToolsFrameState()
 
diff --git a/packages/devtools/src/module-main.ts b/packages/devtools/src/module-main.ts
index bc5cc35a15..9aec671ec9 100644
--- a/packages/devtools/src/module-main.ts
+++ b/packages/devtools/src/module-main.ts
@@ -192,7 +192,8 @@ window.__NUXT_DEVTOOLS_TIME_METRIC__.appInit = Date.now()
 
   await import('./integrations/plugin-metrics').then(({ setup }) => setup(ctx))
 
-  await import('./integrations/vue-devtools').then(({ setup }) => setup(ctx))
+  if (options.vueDevTools !== false)
+    await import('./integrations/vue-devtools').then(({ setup }) => setup(ctx))
 
   if (options.viteInspect !== false)
     await import('./integrations/vite-inspect').then(({ setup }) => setup(ctx))