vite-plugin-vue-devtools + Vue Devtools integration not working

[DanielGiljam]

Describe the bug

I'm working on a project where we're using vite-plugin-vue-devtools to get Vue Devtools into our app. It makes the Devtools appear in the app similarly to how the VueQueryDevtools component makes TanStack Query's Devtools appear the app; as an overlay which can be toggled by an icon on the side of the page.

I really like this way of using Vue Devtools (or framework devtools in general) since the devtool is then automatically available right after cloning, installing dependencies and starting the dev server and developers don't have to separately install any browser extensions in their browsers.

When discovering Vue Query's integration with Vue Devtools, I got really excited, as I think having all devtools accessible through one panel which ships with the application (codebase), not requiring any browser extensions to be installed separately, would be so cool and good DX.

However, I've noticed that the integration (which is btw. enabled when passing enableDevtoolsV6Plugin: true to VueQueryPlugin) doesn't work with Vue Devtools through vite-plugin-vue-devtools.

It doesn't display any errors, but the Vue Query module simply doesn't appear in the sidebar of Vue Devtools.

I debugged the code enough to notice that the setupFn that Vue Query passes to setupDevtoolsPlugin is never invoked by Vue Devtools (or @vue/devtools-api).

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-query-i1agfe?file=src%2Fmain.ts

Steps to reproduce

1. Click on the Vue Devtools button on the bottom of the page.
2. Witness that Vue Query module doesn't appear there even though enableDevtoolsV6Plugin: true is set in VueQueryPlugin's options.

Expected behavior

Vue Query module would appear in Vue Devtools through vite-plugin-vue-devtools

How often does this bug happen?

Every time

Screenshots or Videos

Platform

• OS: macOS Sonoma 14.4.1 (23E224)
• Browser: Chrome (version: 123.0.6312.59 (Official Build) (arm64))

Tanstack Query adapter

vue-query

TanStack Query version

v5.28.13

TypeScript version

No response

Additional context

No response

[DamianOsipiuk]

Our build-in plugin only supports up to v6 of vue devtools, which is available as browser extension.

For v7+ they have made some breaking changes and specifically blacklisted vue-query to not run the plugin, cause it's not compatibile.

At this point, since there are many devtools avialbe for Vue like browser extension, vite, nuxt and potentially more in the future, it would be better for community to maintain those integrations.

From our end we will provide tanstack specific devtools that will have the most features and will be always up-to-date across frameworks.

[reslear]

Good news, v7 compatible with v6 plugin API
vuejs/devtools#421