feat: allow override vue-inspector options, close #234

nuxt · May 16, 2023 · 3311f11 · 3311f11
1 parent 9dc0694
commit 3311f11
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 4 deletions.
diff --git a/packages/devtools-kit/src/_types/options.ts b/packages/devtools-kit/src/_types/options.ts
@@ -1,3 +1,4 @@
+import type { VitePluginInspectorOptions } from 'vite-plugin-vue-inspector'
 import type { ModuleCustomTab } from './custom-tabs'
 
 export interface ModuleOptions {
@@ -25,7 +26,7 @@ export interface ModuleOptions {
    *
    * @default true
    */
-  componentInspector?: boolean
+  componentInspector?: boolean | VitePluginInspectorOptions
 
   /**
    * Enable vite-plugin-inspect

diff --git a/packages/devtools/client/nuxt.config.ts b/packages/devtools/client/nuxt.config.ts
@@ -33,6 +33,11 @@ export default defineNuxtConfig({
     '@nuxt/devtools-kit/types': r('../../devtools-kit/src/types'),
     '@nuxt/devtools-kit': r('../../devtools-kit/src/index'),
   },
+  devtools: {
+    componentInspector: {
+      toggleComboKey: 'meta-shift-x',
+    },
+  },
   appConfig: {
     fixture2: 'from nuxt.config.ts',
   },

diff --git a/packages/devtools/src/integrations/vue-inspector.ts b/packages/devtools/src/integrations/vue-inspector.ts
@@ -3,13 +3,16 @@ import type { Plugin } from 'vite'
 import VueInspector from 'vite-plugin-vue-inspector'
 import type { NuxtDevtoolsServerContext } from '../types'
 
-export async function setup({ nuxt }: NuxtDevtoolsServerContext) {
+export async function setup({ nuxt, options }: NuxtDevtoolsServerContext) {
   if (!nuxt.options.dev)
     return
 
   addVitePlugin(VueInspector({
-    appendTo: /\/entry\.m?js$/,
     toggleComboKey: '',
+    ...typeof options.componentInspector === 'boolean'
+      ? {}
+      : options.componentInspector,
+    appendTo: /\/entry\.m?js$/,
     toggleButtonVisibility: 'never',
   }) as Plugin)
 }
diff --git a/packages/devtools/src/runtime/plugins/view/Frame.vue b/packages/devtools/src/runtime/plugins/view/Frame.vue
@@ -186,8 +186,10 @@ useEventListener(window, 'mouseleave', () => {
 })
 
 useEventListener(window, 'keydown', (e: KeyboardEvent) => {
-  if (viewMode.value === 'component-inspector' && e.key === 'Escape')
+  if (e.key === 'Escape' && (viewMode.value === 'component-inspector' || window.__VUE_INSPECTOR__?.enabled)) {
+    disableComponentInspector()
     closePanel()
+  }
 })
 
 // Close panel on outside click (when enabled)