@vue/devtools-kit 7.0.20 → 7.0.22

package/dist/index.cjs

@@ -11,9 +11,9 @@ var __esm = (fn, res) => function __init() {
 var __commonJS = (cb, mod) => function __require() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
-var __export = (target9, all) => {
+var __export = (target10, all) => {
   for (var name in all)
-    __defProp(target9, name, { get: all[name], enumerable: true });
+    __defProp(target10, name, { get: all[name], enumerable: true });
 };
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
@@ -23,19 +23,19 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target9) => (target9 = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+var __toESM = (mod, isNodeMode, target10) => (target10 = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
   // compatible transform (i.e. "__esModule" has not been set), then set
   // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target9, "default", { value: mod, enumerable: true }) : target9,
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target10, "default", { value: mod, enumerable: true }) : target10,
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// ../../node_modules/.pnpm/tsup@8.0.2_postcss@8.4.35_typescript@5.4.2/node_modules/tsup/assets/cjs_shims.js
+// ../../node_modules/.pnpm/tsup@8.0.2_postcss@8.4.38_typescript@5.4.3/node_modules/tsup/assets/cjs_shims.js
 var init_cjs_shims = __esm({
-  "../../node_modules/.pnpm/tsup@8.0.2_postcss@8.4.35_typescript@5.4.2/node_modules/tsup/assets/cjs_shims.js"() {
+  "../../node_modules/.pnpm/tsup@8.0.2_postcss@8.4.38_typescript@5.4.3/node_modules/tsup/assets/cjs_shims.js"() {
     "use strict";
   }
 });
@@ -1605,7 +1605,7 @@ init_cjs_shims();
 
 // src/core/index.ts
 init_cjs_shims();
-var import_devtools_shared15 = require("@vue/devtools-shared");
+var import_devtools_shared16 = require("@vue/devtools-shared");
 
 // src/hook/index.ts
 init_cjs_shims();
@@ -1659,9 +1659,10 @@ var on = {
 function createDevToolsHook() {
   return {
     id: "vue-devtools-next",
+    devtoolsVersion: "7.0",
     enabled: false,
     appRecords: [],
-    apps: {},
+    apps: [],
     events: /* @__PURE__ */ new Map(),
     on(event, fn) {
       var _a10;
@@ -1718,7 +1719,9 @@ function subscribeDevToolsHook() {
       return;
     devtoolsHooks.callHook("component:removed" /* COMPONENT_REMOVED */, app, uid, parentUid, component);
   });
-  hook2.on("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, (pluginDescriptor, setupFn) => {
+  hook2.on("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, (pluginDescriptor, setupFn, options) => {
+    if ((options == null ? void 0 : options.target) === "legacy")
+      return;
     devtoolsHooks.callHook("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, pluginDescriptor, setupFn);
   });
 }
@@ -2301,8 +2304,10 @@ var ComponentWalker = class {
    */
   mark(instance, force = false) {
     const instanceMap = getAppRecord(instance).instanceMap;
-    if (force || !instanceMap.has(instance.__VUE_DEVTOOLS_UID__))
+    if (force || !instanceMap.has(instance.__VUE_DEVTOOLS_UID__)) {
       instanceMap.set(instance.__VUE_DEVTOOLS_UID__, instance);
+      devtoolsAppRecords.active.instanceMap = instanceMap;
+    }
   }
   isKeepAlive(instance) {
     return instance.type.__isKeepAlive && instance.__v_cache;
@@ -2386,9 +2391,9 @@ var StateEditor = class {
           Reflect.deleteProperty(object, field);
       }
       if (!state.remove) {
-        const target9 = object[state.newKey || field];
-        if (this.refEditor.isRef(target9))
-          this.refEditor.set(target9, value);
+        const target10 = object[state.newKey || field];
+        if (this.refEditor.isRef(target10))
+          this.refEditor.set(target10, value);
         else if ((0, import_vue2.toRaw)(object) instanceof Map)
           object.set(state.newKey || field, value);
         else if ((0, import_vue2.toRaw)(object) instanceof Set)
@@ -2440,14 +2445,14 @@ async function editComponentState(payload, stateEditor2) {
   if (!instance)
     return;
   const targetPath = path.slice();
-  let target9;
+  let target10;
   if (instance.devtoolsRawSetupState && Object.keys(instance.devtoolsRawSetupState).includes(path[0])) {
-    target9 = instance.devtoolsRawSetupState;
+    target10 = instance.devtoolsRawSetupState;
   }
-  if (target9 && targetPath) {
+  if (target10 && targetPath) {
     if (state.type === "object" && type === "reactive") {
     }
-    stateEditor2.set(target9, targetPath, state.value, stateEditor2.createDefaultSetCallback(state));
+    stateEditor2.set(target10, targetPath, state.value, stateEditor2.createDefaultSetCallback(state));
   }
 }
 var stateEditor = new StateEditor();
@@ -2959,8 +2964,10 @@ function registerComponentDevToolsPlugin(app) {
       if (component) {
         if (component.__VUE_DEVTOOLS_UID__ == null)
           component.__VUE_DEVTOOLS_UID__ = id;
-        if (!(appRecord == null ? void 0 : appRecord.instanceMap.has(id)))
+        if (!(appRecord == null ? void 0 : appRecord.instanceMap.has(id))) {
           appRecord == null ? void 0 : appRecord.instanceMap.set(id, component);
+          devtoolsAppRecords.active.instanceMap = appRecord.instanceMap;
+        }
       }
       if (!appRecord)
         return;
@@ -2983,8 +2990,10 @@ function registerComponentDevToolsPlugin(app) {
       if (component) {
         if (component.__VUE_DEVTOOLS_UID__ == null)
           component.__VUE_DEVTOOLS_UID__ = id;
-        if (!(appRecord == null ? void 0 : appRecord.instanceMap.has(id)))
+        if (!(appRecord == null ? void 0 : appRecord.instanceMap.has(id))) {
           appRecord == null ? void 0 : appRecord.instanceMap.set(id, component);
+          devtoolsAppRecords.active.instanceMap = appRecord.instanceMap;
+        }
       }
       if (!appRecord)
         return;
@@ -3008,6 +3017,7 @@ function registerComponentDevToolsPlugin(app) {
         instance: component
       });
       appRecord == null ? void 0 : appRecord.instanceMap.delete(id);
+      devtoolsAppRecords.active.instanceMap = appRecord.instanceMap;
       debounceSendInspectorTree();
     });
     devtoolsContext.componentPluginHookBuffer = [
@@ -3213,9 +3223,9 @@ function unhighlight() {
 }
 var inspectInstance = null;
 function inspectFn(e) {
-  const target9 = e.target;
-  if (target9) {
-    const instance = target9.__vueParentComponent;
+  const target10 = e.target;
+  if (target10) {
+    const instance = target10.__vueParentComponent;
     if (instance) {
       inspectInstance = instance;
       const el = instance.vnode.el;
@@ -4214,16 +4224,16 @@ var callConnectedUpdatedHook = (0, import_perfect_debounce3.debounce)((state, ol
   apiHooks.callHook("devtools:connected-updated" /* DEVTOOLS_CONNECTED_UPDATED */, state, oldState);
 }, 80);
 var devtoolsState = new Proxy(import_devtools_shared10.target[STATE_KEY], {
-  get(target9, property) {
+  get(target10, property) {
     return import_devtools_shared10.target[STATE_KEY][property];
   },
-  deleteProperty(target9, property) {
-    delete target9[property];
+  deleteProperty(target10, property) {
+    delete target10[property];
     return true;
   },
-  set(target9, property, value) {
+  set(target10, property, value) {
     const oldState = { ...import_devtools_shared10.target[STATE_KEY] };
-    target9[property] = value;
+    target10[property] = value;
     import_devtools_shared10.target[STATE_KEY][property] = value;
     callStateUpdatedHook(import_devtools_shared10.target[STATE_KEY], oldState);
     if (["connected", "clientConnected"].includes(property.toString()) && oldState[property] !== value)
@@ -4269,7 +4279,7 @@ var _a5, _b5;
 var _a6, _b6;
 (_b6 = (_a6 = import_devtools_shared11.target)[ROUTER_KEY]) != null ? _b6 : _a6[ROUTER_KEY] = null;
 var devtoolsRouterInfo = new Proxy(import_devtools_shared11.target[ROUTER_INFO_KEY], {
-  get(target9, property) {
+  get(target10, property) {
     return import_devtools_shared11.target[ROUTER_INFO_KEY][property];
   }
 });
@@ -4296,14 +4306,14 @@ function resetDevToolsContext() {
   import_devtools_shared12.target[CONTEXT_KEY] = initContextFactory();
 }
 var devtoolsContext = new Proxy(import_devtools_shared12.target[CONTEXT_KEY], {
-  get(target9, property) {
+  get(target10, property) {
     if (property === "router")
       return import_devtools_shared12.target[ROUTER_KEY];
     else if (property === "clear")
       return resetDevToolsContext;
     return import_devtools_shared12.target[CONTEXT_KEY][property];
   },
-  set(target9, property, value) {
+  set(target10, property, value) {
     import_devtools_shared12.target[CONTEXT_KEY][property] = value;
     return true;
   }
@@ -4319,7 +4329,7 @@ var devtoolsAppRecords = new Proxy(devtoolsState.appRecords, {
     else if (property === "activeId")
       return devtoolsState.activeAppRecordId;
   },
-  set(target9, property, value) {
+  set(target10, property, value) {
     var _a10;
     const oldState = { ...devtoolsState };
     if (property === "value") {
@@ -4364,17 +4374,37 @@ function setDevToolsEnv(env) {
   };
 }
 
+// src/compat/index.ts
+init_cjs_shims();
+var import_devtools_shared15 = require("@vue/devtools-shared");
+function onLegacyDevToolsPluginApiAvailabled(cb) {
+  if (import_devtools_shared15.target.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__) {
+    cb();
+    return;
+  }
+  Object.defineProperty(import_devtools_shared15.target, "__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__", {
+    set(value) {
+      if (value)
+        cb();
+    },
+    configurable: true
+  });
+}
+
 // src/core/index.ts
 function initDevTools() {
   var _a10;
   devtoolsState.vitePluginDetected = getDevToolsEnv().vitePluginDetected;
-  const isDevToolsNext = ((_a10 = import_devtools_shared15.target.__VUE_DEVTOOLS_GLOBAL_HOOK__) == null ? void 0 : _a10.id) === "vue-devtools-next";
-  if (import_devtools_shared15.target.__VUE_DEVTOOLS_GLOBAL_HOOK__ && isDevToolsNext)
+  const isDevToolsNext = ((_a10 = import_devtools_shared16.target.__VUE_DEVTOOLS_GLOBAL_HOOK__) == null ? void 0 : _a10.id) === "vue-devtools-next";
+  if (import_devtools_shared16.target.__VUE_DEVTOOLS_GLOBAL_HOOK__ && isDevToolsNext)
     return;
-  if (import_devtools_shared15.target.__VUE_DEVTOOLS_GLOBAL_HOOK__)
-    Object.assign(__VUE_DEVTOOLS_GLOBAL_HOOK__, createDevToolsHook());
-  else
-    import_devtools_shared15.target.__VUE_DEVTOOLS_GLOBAL_HOOK__ = createDevToolsHook();
+  if (!import_devtools_shared16.target.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
+    import_devtools_shared16.target.__VUE_DEVTOOLS_GLOBAL_HOOK__ = createDevToolsHook();
+  } else {
+    if (!import_devtools_shared16.isNuxtApp) {
+      Object.assign(__VUE_DEVTOOLS_GLOBAL_HOOK__, createDevToolsHook());
+    }
+  }
   hook.on.setupDevtoolsPlugin((pluginDescriptor, setupFn) => {
     collectDevToolsPlugin(pluginDescriptor, setupFn);
     const { app, api } = devtoolsAppRecords.active || {};
@@ -4382,6 +4412,12 @@ function initDevTools() {
       return;
     setupExternalPlugin([pluginDescriptor, setupFn], app, api);
   });
+  onLegacyDevToolsPluginApiAvailabled(() => {
+    const normalizedPluginBuffer = devtoolsState.pluginBuffer.filter(([item]) => item.id !== "components");
+    normalizedPluginBuffer.forEach(([pluginDescriptor, setupFn]) => {
+      import_devtools_shared16.target.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, pluginDescriptor, setupFn, { target: "legacy" });
+    });
+  });
   hook.on.vueAppInit(async (app, version) => {
     const record = createAppRecord(app);
     const api = new DevToolsPluginApi();

package/dist/index.d.cts

@@ -452,11 +452,14 @@ interface DevToolsEvent {
     [DevToolsHooks.COMPONENT_ADDED]: (app: HookAppInstance, uid: number, parentUid: number, component: VueAppInstance) => void;
     [DevToolsHooks.COMPONENT_UPDATED]: DevToolsEvent['component:added'];
     [DevToolsHooks.COMPONENT_REMOVED]: DevToolsEvent['component:added'];
-    [DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) => void;
+    [DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction, options?: {
+        target?: string;
+    }) => void;
 }
 interface DevToolsHook {
     id: string;
     enabled?: boolean;
+    devtoolsVersion: string;
     events: Map<DevToolsHooks, Function[]>;
     emit: (event: DevToolsHooks, ...payload: any[]) => void;
     on: <T extends Function>(event: DevToolsHooks, handler: T) => () => void;

package/dist/index.d.ts

@@ -452,11 +452,14 @@ interface DevToolsEvent {
     [DevToolsHooks.COMPONENT_ADDED]: (app: HookAppInstance, uid: number, parentUid: number, component: VueAppInstance) => void;
     [DevToolsHooks.COMPONENT_UPDATED]: DevToolsEvent['component:added'];
     [DevToolsHooks.COMPONENT_REMOVED]: DevToolsEvent['component:added'];
-    [DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) => void;
+    [DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction, options?: {
+        target?: string;
+    }) => void;
 }
 interface DevToolsHook {
     id: string;
     enabled?: boolean;
+    devtoolsVersion: string;
     events: Map<DevToolsHooks, Function[]>;
     emit: (event: DevToolsHooks, ...payload: any[]) => void;
     on: <T extends Function>(event: DevToolsHooks, handler: T) => () => void;

package/dist/index.js

@@ -18,18 +18,18 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target9) => (target9 = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+var __toESM = (mod, isNodeMode, target10) => (target10 = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
   // compatible transform (i.e. "__esModule" has not been set), then set
   // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target9, "default", { value: mod, enumerable: true }) : target9,
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target10, "default", { value: mod, enumerable: true }) : target10,
   mod
 ));
 
-// ../../node_modules/.pnpm/tsup@8.0.2_postcss@8.4.35_typescript@5.4.2/node_modules/tsup/assets/esm_shims.js
+// ../../node_modules/.pnpm/tsup@8.0.2_postcss@8.4.38_typescript@5.4.3/node_modules/tsup/assets/esm_shims.js
 var init_esm_shims = __esm({
-  "../../node_modules/.pnpm/tsup@8.0.2_postcss@8.4.35_typescript@5.4.2/node_modules/tsup/assets/esm_shims.js"() {
+  "../../node_modules/.pnpm/tsup@8.0.2_postcss@8.4.38_typescript@5.4.3/node_modules/tsup/assets/esm_shims.js"() {
     "use strict";
   }
 });
@@ -1577,7 +1577,7 @@ init_esm_shims();
 
 // src/core/index.ts
 init_esm_shims();
-import { target as target8 } from "@vue/devtools-shared";
+import { isNuxtApp, target as target9 } from "@vue/devtools-shared";
 
 // src/hook/index.ts
 init_esm_shims();
@@ -1631,9 +1631,10 @@ var on = {
 function createDevToolsHook() {
   return {
     id: "vue-devtools-next",
+    devtoolsVersion: "7.0",
     enabled: false,
     appRecords: [],
-    apps: {},
+    apps: [],
     events: /* @__PURE__ */ new Map(),
     on(event, fn) {
       var _a10;
@@ -1690,7 +1691,9 @@ function subscribeDevToolsHook() {
       return;
     devtoolsHooks.callHook("component:removed" /* COMPONENT_REMOVED */, app, uid, parentUid, component);
   });
-  hook2.on("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, (pluginDescriptor, setupFn) => {
+  hook2.on("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, (pluginDescriptor, setupFn, options) => {
+    if ((options == null ? void 0 : options.target) === "legacy")
+      return;
     devtoolsHooks.callHook("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, pluginDescriptor, setupFn);
   });
 }
@@ -2273,8 +2276,10 @@ var ComponentWalker = class {
    */
   mark(instance, force = false) {
     const instanceMap = getAppRecord(instance).instanceMap;
-    if (force || !instanceMap.has(instance.__VUE_DEVTOOLS_UID__))
+    if (force || !instanceMap.has(instance.__VUE_DEVTOOLS_UID__)) {
       instanceMap.set(instance.__VUE_DEVTOOLS_UID__, instance);
+      devtoolsAppRecords.active.instanceMap = instanceMap;
+    }
   }
   isKeepAlive(instance) {
     return instance.type.__isKeepAlive && instance.__v_cache;
@@ -2358,9 +2363,9 @@ var StateEditor = class {
           Reflect.deleteProperty(object, field);
       }
       if (!state.remove) {
-        const target9 = object[state.newKey || field];
-        if (this.refEditor.isRef(target9))
-          this.refEditor.set(target9, value);
+        const target10 = object[state.newKey || field];
+        if (this.refEditor.isRef(target10))
+          this.refEditor.set(target10, value);
         else if (toRaw(object) instanceof Map)
           object.set(state.newKey || field, value);
         else if (toRaw(object) instanceof Set)
@@ -2412,14 +2417,14 @@ async function editComponentState(payload, stateEditor2) {
   if (!instance)
     return;
   const targetPath = path.slice();
-  let target9;
+  let target10;
   if (instance.devtoolsRawSetupState && Object.keys(instance.devtoolsRawSetupState).includes(path[0])) {
-    target9 = instance.devtoolsRawSetupState;
+    target10 = instance.devtoolsRawSetupState;
   }
-  if (target9 && targetPath) {
+  if (target10 && targetPath) {
     if (state.type === "object" && type === "reactive") {
     }
-    stateEditor2.set(target9, targetPath, state.value, stateEditor2.createDefaultSetCallback(state));
+    stateEditor2.set(target10, targetPath, state.value, stateEditor2.createDefaultSetCallback(state));
   }
 }
 var stateEditor = new StateEditor();
@@ -2931,8 +2936,10 @@ function registerComponentDevToolsPlugin(app) {
       if (component) {
         if (component.__VUE_DEVTOOLS_UID__ == null)
           component.__VUE_DEVTOOLS_UID__ = id;
-        if (!(appRecord == null ? void 0 : appRecord.instanceMap.has(id)))
+        if (!(appRecord == null ? void 0 : appRecord.instanceMap.has(id))) {
           appRecord == null ? void 0 : appRecord.instanceMap.set(id, component);
+          devtoolsAppRecords.active.instanceMap = appRecord.instanceMap;
+        }
       }
       if (!appRecord)
         return;
@@ -2955,8 +2962,10 @@ function registerComponentDevToolsPlugin(app) {
       if (component) {
         if (component.__VUE_DEVTOOLS_UID__ == null)
           component.__VUE_DEVTOOLS_UID__ = id;
-        if (!(appRecord == null ? void 0 : appRecord.instanceMap.has(id)))
+        if (!(appRecord == null ? void 0 : appRecord.instanceMap.has(id))) {
           appRecord == null ? void 0 : appRecord.instanceMap.set(id, component);
+          devtoolsAppRecords.active.instanceMap = appRecord.instanceMap;
+        }
       }
       if (!appRecord)
         return;
@@ -2980,6 +2989,7 @@ function registerComponentDevToolsPlugin(app) {
         instance: component
       });
       appRecord == null ? void 0 : appRecord.instanceMap.delete(id);
+      devtoolsAppRecords.active.instanceMap = appRecord.instanceMap;
       debounceSendInspectorTree();
     });
     devtoolsContext.componentPluginHookBuffer = [
@@ -3185,9 +3195,9 @@ function unhighlight() {
 }
 var inspectInstance = null;
 function inspectFn(e) {
-  const target9 = e.target;
-  if (target9) {
-    const instance = target9.__vueParentComponent;
+  const target10 = e.target;
+  if (target10) {
+    const instance = target10.__vueParentComponent;
     if (instance) {
       inspectInstance = instance;
       const el = instance.vnode.el;
@@ -4186,16 +4196,16 @@ var callConnectedUpdatedHook = debounce3((state, oldState) => {
   apiHooks.callHook("devtools:connected-updated" /* DEVTOOLS_CONNECTED_UPDATED */, state, oldState);
 }, 80);
 var devtoolsState = new Proxy(global2[STATE_KEY], {
-  get(target9, property) {
+  get(target10, property) {
     return global2[STATE_KEY][property];
   },
-  deleteProperty(target9, property) {
-    delete target9[property];
+  deleteProperty(target10, property) {
+    delete target10[property];
     return true;
   },
-  set(target9, property, value) {
+  set(target10, property, value) {
     const oldState = { ...global2[STATE_KEY] };
-    target9[property] = value;
+    target10[property] = value;
     global2[STATE_KEY][property] = value;
     callStateUpdatedHook(global2[STATE_KEY], oldState);
     if (["connected", "clientConnected"].includes(property.toString()) && oldState[property] !== value)
@@ -4241,7 +4251,7 @@ var _a5, _b5;
 var _a6, _b6;
 (_b6 = (_a6 = global3)[ROUTER_KEY]) != null ? _b6 : _a6[ROUTER_KEY] = null;
 var devtoolsRouterInfo = new Proxy(global3[ROUTER_INFO_KEY], {
-  get(target9, property) {
+  get(target10, property) {
     return global3[ROUTER_INFO_KEY][property];
   }
 });
@@ -4268,14 +4278,14 @@ function resetDevToolsContext() {
   global4[CONTEXT_KEY] = initContextFactory();
 }
 var devtoolsContext = new Proxy(global4[CONTEXT_KEY], {
-  get(target9, property) {
+  get(target10, property) {
     if (property === "router")
       return global4[ROUTER_KEY];
     else if (property === "clear")
       return resetDevToolsContext;
     return global4[CONTEXT_KEY][property];
   },
-  set(target9, property, value) {
+  set(target10, property, value) {
     global4[CONTEXT_KEY][property] = value;
     return true;
   }
@@ -4291,7 +4301,7 @@ var devtoolsAppRecords = new Proxy(devtoolsState.appRecords, {
     else if (property === "activeId")
       return devtoolsState.activeAppRecordId;
   },
-  set(target9, property, value) {
+  set(target10, property, value) {
     var _a10;
     const oldState = { ...devtoolsState };
     if (property === "value") {
@@ -4336,17 +4346,37 @@ function setDevToolsEnv(env) {
   };
 }
 
+// src/compat/index.ts
+init_esm_shims();
+import { target as target8 } from "@vue/devtools-shared";
+function onLegacyDevToolsPluginApiAvailabled(cb) {
+  if (target8.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__) {
+    cb();
+    return;
+  }
+  Object.defineProperty(target8, "__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__", {
+    set(value) {
+      if (value)
+        cb();
+    },
+    configurable: true
+  });
+}
+
 // src/core/index.ts
 function initDevTools() {
   var _a10;
   devtoolsState.vitePluginDetected = getDevToolsEnv().vitePluginDetected;
-  const isDevToolsNext = ((_a10 = target8.__VUE_DEVTOOLS_GLOBAL_HOOK__) == null ? void 0 : _a10.id) === "vue-devtools-next";
-  if (target8.__VUE_DEVTOOLS_GLOBAL_HOOK__ && isDevToolsNext)
+  const isDevToolsNext = ((_a10 = target9.__VUE_DEVTOOLS_GLOBAL_HOOK__) == null ? void 0 : _a10.id) === "vue-devtools-next";
+  if (target9.__VUE_DEVTOOLS_GLOBAL_HOOK__ && isDevToolsNext)
     return;
-  if (target8.__VUE_DEVTOOLS_GLOBAL_HOOK__)
-    Object.assign(__VUE_DEVTOOLS_GLOBAL_HOOK__, createDevToolsHook());
-  else
-    target8.__VUE_DEVTOOLS_GLOBAL_HOOK__ = createDevToolsHook();
+  if (!target9.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
+    target9.__VUE_DEVTOOLS_GLOBAL_HOOK__ = createDevToolsHook();
+  } else {
+    if (!isNuxtApp) {
+      Object.assign(__VUE_DEVTOOLS_GLOBAL_HOOK__, createDevToolsHook());
+    }
+  }
   hook.on.setupDevtoolsPlugin((pluginDescriptor, setupFn) => {
     collectDevToolsPlugin(pluginDescriptor, setupFn);
     const { app, api } = devtoolsAppRecords.active || {};
@@ -4354,6 +4384,12 @@ function initDevTools() {
       return;
     setupExternalPlugin([pluginDescriptor, setupFn], app, api);
   });
+  onLegacyDevToolsPluginApiAvailabled(() => {
+    const normalizedPluginBuffer = devtoolsState.pluginBuffer.filter(([item]) => item.id !== "components");
+    normalizedPluginBuffer.forEach(([pluginDescriptor, setupFn]) => {
+      target9.__VUE_DEVTOOLS_GLOBAL_HOOK__.emit("devtools-plugin:setup" /* SETUP_DEVTOOLS_PLUGIN */, pluginDescriptor, setupFn, { target: "legacy" });
+    });
+  });
   hook.on.vueAppInit(async (app, version) => {
     const record = createAppRecord(app);
     const api = new DevToolsPluginApi();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vue/devtools-kit",
   "type": "module",
-  "version": "7.0.20",
+  "version": "7.0.22",
   "author": "webfansplz",
   "license": "MIT",
   "exports": {
@@ -25,7 +25,7 @@
     "mitt": "^3.0.1",
     "perfect-debounce": "^1.0.0",
     "speakingurl": "^14.0.1",
-    "@vue/devtools-shared": "^7.0.20"
+    "@vue/devtools-shared": "^7.0.22"
   },
   "devDependencies": {
     "@types/speakingurl": "^13.0.6",