📦 console-vue-query-devtools-sdk

A lightweight dev-only SDK for visualizing Vue Query cache in Vue 2.7 projects where official Vue Query Devtools are not available.

🚫 The official @tanstack/vue-query-devtools only supports Vue 3.x and Vite-based projects.
✅ This SDK enables cache inspection in Vue 2.7 environments by bridging your app with a custom Chrome DevTools panel.

✨ Features

🔍 Automatically detects and registers the active QueryClient
💻 No UI – the SDK exposes a <ConsoleVueQueryDevtools /> component that runs in the background
🧪 Dev-only – safe to include in production builds (no effect outside NODE_ENV=development)
🔌 Optional client prop – manually test a custom QueryClient if needed

📦 Installation

npm install console-vue-query-devtools-sdk --save-dev
# or
pnpm add -D console-vue-query-devtools-sdk

🚀 Usage

Use in your root app component (e.g. App.vue):

<script setup lang="ts">
import { ConsoleVueQueryDevtools } from 'console-vue-query-devtools-sdk';
</script>

<template>
    <ConsoleVueQueryDevtools />
</template>

💡 That’s it! The component automatically registers the active QueryClient using useQueryClient().

[Optional] Manually provide a QueryClient:

<script setup lang="ts">
import { QueryClient } from '@tanstack/vue-query';
import { ConsoleVueQueryDevtools } from 'console-vue-query-devtools-sdk';

const customClient = new QueryClient({ /* ... */ });
</script>

<template>
  <ConsoleVueQueryDevtools :client="customClient" />
</template>

🧪 Useful for testing multiple clients or using isolated instances.

🧠 How it works

The SDK registers the provided (or detected) QueryClient to window.VUE_QUERY_DEVTOOLS, enabling Chrome extensions to read:

query keys
observer counts
cache state
garbage collection time

A postMessage() loop in the injected script transfers the data to your DevTools extension.

🧩 Why this exists

– Vue 2.7 supports Composition API, but not Vue 3 Devtools – @tanstack/vue-query-devtools is Vue 3.x only

This SDK fills the gap for legacy or incremental migration projects

🧪 Dev-only by design

This SDK is automatically excluded in production environments.

process.env.NODE_ENV or import.meta.env.MODE are used for environment checks
No runtime logic will run in non-dev builds

🛠 Requirements

@tanstack/vue-query v5+
vue 2.7.x
Chrome DevTools Extension (must be installed separately)

📄 License

MIT