fix: implement disableAppScope and disablePluginScope

[skirtles-code]

Vue DevTools 6 had settings disableAppScope and disablePluginScope, both defaulting to false.

Currently, these settings appear in the types for Vue DevTools 8 but they don't actually do anything.

I don't know whether anyone actually uses these settings, but Vue DevTools 8 currently behaves as though they are set to true, which is different from version 6.

The code that implemented these settings in v6 is:

• https://github.com/vuejs/devtools-v6/blob/dd2ab5d4275187cbd81952a2a3d53c335643c1f4/packages/app-backend-api/src/hooks.ts#L35-L41

They are also documented at:

• https://devtools-v6.vuejs.org/plugin/api-reference.html#setupdevtoolsplugin

This difference from v6 has led to some problems in Vue Router and Pinia when working with multiple applications on the same page.

A couple of notes on my implementation:

• I couldn't figure out how to get the types to behave, so I've resorted to any in a couple of places. If anyone has a better suggestion please let me know.
• I've checked payload.app, which is slightly different from how v6 did it (using ctx.currentAppRecord). I'm not sure if this makes a difference, it seemed to work fine in my testing.

I checked various libraries to see how they use @vue/devtools-api. Some aren't using v8 yet, but Vue Router, Pinia and VitePress are notable examples that are.

I've outlined the problems with those libraries below. This PR should fix these problems.

Vue Router

It's possible to have multiple apps with multiple routers on a page using createMemoryHistory.

Vue Router's integration with the DevTools is here:

• https://github.com/vuejs/router/blob/main/packages/router/src/devtools.ts

This makes 4 calls to app.on hooks. Two of them are checking payload.app === app, two aren't. The two that aren't lead to problems.

The tags are duplicated and there are multiple $route entries.

If we don't fix this in Vue DevTools then it'll need to be fixed in Vue Router instead.

Pinia

DevTools integration is here:

• https://github.com/vuejs/pinia/blob/v3/packages/pinia/src/devtools/plugin.ts

There are 5 api.on calls and two are missing the payload.app === app.

I'm unclear what the call to api.on.editComponentState actually does. I haven't been able to find where this gets triggered in the DevTools. But from looking at how Pinia uses it, it looks like adding payload.app === app would be harmless and might even be necessary to ensure it updates the correct pinia instance.

The other is api.on.inspectComponent, which leads to duplication in the DevTools:

Again, if we don't fix this in Vue DevTools then it'll need to be fixed in Pinia instead.

VitePress

VitePress is using v8. The code for its integration is at:

• https://github.com/vuejs/vitepress/blob/main/src/client/app/devtools.ts

That isn't checking payload.app, which can lead to properties being injected in the wrong app.

[netlify]

✅ Deploy Preview for vue-devtools-docs canceled.

Name	Link
🔨 Latest commit	bbe2c9e
🔍 Latest deploy log	https://app.netlify.com/projects/vue-devtools-docs/deploys/6990ae16c0b17c0008f17093

[pkg-pr-new]

Open in StackBlitz

@vue/devtools-applet

npm i https://pkg.pr.new/@vue/devtools-applet@1044

@vue/devtools-core

npm i https://pkg.pr.new/@vue/devtools-core@1044

@vue/devtools

npm i https://pkg.pr.new/@vue/devtools@1044

@vue/devtools-api

npm i https://pkg.pr.new/@vue/devtools-api@1044

@vue/devtools-kit

npm i https://pkg.pr.new/@vue/devtools-kit@1044

@vue/devtools-electron

npm i https://pkg.pr.new/@vue/devtools-electron@1044

@vue/devtools-shared

npm i https://pkg.pr.new/@vue/devtools-shared@1044

@vue/devtools-ui

npm i https://pkg.pr.new/@vue/devtools-ui@1044

vite-plugin-vue-devtools

npm i https://pkg.pr.new/vite-plugin-vue-devtools@1044

commit: bbe2c9e