feat: allow override component inspector with __NUXT_INSPECTOR__

nuxt · Feb 16, 2025 · 9f3c8bf · 9f3c8bf
1 parent 13f6fd0
commit 9f3c8bf
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/packages/devtools/src/runtime/plugins/view/client.ts b/packages/devtools/src/runtime/plugins/view/client.ts
@@ -182,22 +182,26 @@ export async function setupDevToolsClient({
     })
   }
 
+  function getInspector() {
+    return window.__NUXT_INSPECTOR__ || window.__VUE_INSPECTOR__
+  }
+
   function enableComponentInspector() {
-    window.__VUE_INSPECTOR__?.enable()
+    getInspector()?.enable()
     isInspecting.value = true
   }
 
   function disableComponentInspector() {
-    if (!window.__VUE_INSPECTOR__?.enabled)
+    if (!getInspector()?.enabled)
       return
 
-    window.__VUE_INSPECTOR__?.disable()
+    getInspector()?.disable()
     client?.hooks.callHook('host:inspector:close')
     isInspecting.value = false
   }
 
   function getInspectorInstance(): NuxtDevtoolsHostClient['inspector'] {
-    const componentInspector = window.__VUE_INSPECTOR__
+    const componentInspector = getInspector()
     if (componentInspector) {
       componentInspector.openInEditor = async (url) => {
         disableComponentInspector()
@@ -218,7 +222,7 @@ export async function setupDevToolsClient({
       toggle: () => {
         if (!state.value.open)
           client.devtools.open()
-        if (window.__VUE_INSPECTOR__?.enabled)
+        if (getInspector()?.enabled)
           disableComponentInspector()
         else
           enableComponentInspector()

diff --git a/packages/devtools/src/types/global.ts b/packages/devtools/src/types/global.ts
@@ -61,6 +61,11 @@ declare global {
      */
     __VUE_INSPECTOR__?: VueInspectorClient
 
+    /**
+     * Vue Inspector client
+     */
+    __NUXT_INSPECTOR__?: VueInspectorClient
+
     /**
      * Experimental API: Picture-in-Picture mode
      *