Feature request (vue-query): Support enabling devtools integration in production

[uki00a]

Background

I recently enabled Vue.js devtools in a staging environment of a Nuxt application I'm working on:

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  // ...
  vite: {
    define: {
      process.env.APP_ENV === 'staging'
        ? {
            __VUE_PROD_DEVTOOLS__: 'true'
          }
        : undefined)
    }
  },
})

Then I noticed that Vue Query's events don't show up in Vue.js devtools. Events from other plugins such as Vue Router do show up properly.

Approaches taken by other libraries

• https://github.com/vuejs/router/blob/v4.2.4/packages/router/src/router.ts#L1259-L1261
• https://github.com/vuepress/vuepress-next/blob/v2.0.0-beta.66/packages/client/src/app.ts#L48-L51
• https://github.com/intlify/vue-i18n-next/blob/v9.3.0-beta.24/packages/vue-i18n-core/src/i18n.ts#L622-L640

References

• https://github.com/vuejs/devtools/blob/v6.5.0/packages/docs/src/guide/faq.md
• https://github.com/vuejs/core/blob/v3.3.4/packages/vue/README.md#bundler-build-feature-flags

Temporary workaround

As a workaround, I apply the following patch using patch-package:

diff --git a/node_modules/@tanstack/vue-query/build/lib/vueQueryPlugin.mjs b/node_modules/@tanstack/vue-query/build/lib/vueQueryPlugin.mjs
index 2845363..4a89e1c 100644
--- a/node_modules/@tanstack/vue-query/build/lib/vueQueryPlugin.mjs
+++ b/node_modules/@tanstack/vue-query/build/lib/vueQueryPlugin.mjs
@@ -89,7 +89,7 @@ const VueQueryPlugin = {
     } else {
       app.provide(clientKey, client);
 
-      if (process.env.NODE_ENV === 'development') {
+      if (process.env.NODE_ENV === 'development' || __VUE_PROD_DEVTOOLS__) {
         setupDevtools(app, client);
       }
     }

My environment is as follows:

• OS: macOS
• Browser: Chrome
• vue.js devtools: v6.5.0
• vue: v3.3.4
• @tanstack/vue-query: v4.29.25