From 141e187465a26ce3c36aaeed0a220412e4de0c67 Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Thu, 31 Mar 2022 19:11:44 +0200
Subject: [PATCH 1/9] feat(devtools): devtools v2 as a browser extension

---
 examples/2.x-basic/src/App.vue       |   4 +-
 examples/2.x-basic/vite.config.ts    |   1 +
 examples/basic/src/App.vue           |  11 +-
 examples/basic/vite.config.ts        |   1 +
 examples/multi-client/src/App.vue    |   4 +-
 examples/multi-client/vite.config.ts |   1 +
 examples/multi-page/src/App.vue      |   4 +-
 examples/multi-page/vite.config.ts   |   1 +
 examples/simple/src/App.vue          |   4 +-
 examples/simple/vite.config.ts       |   1 +
 examples/suspense/src/App.vue        |   4 +-
 examples/suspense/vite.config.ts     |   1 +
 package-lock.json                    |  11 ++
 package.json                         |   1 +
 rollup.config.ts                     |   5 +-
 src/devtools/Devtools.vue            |   9 +-
 src/devtools/DevtoolsPanel.vue       |  16 +-
 src/vue/devtools.ts                  | 219 +++++++++++++++++++++++++++
 src/vue/vueQueryPlugin.ts            |  10 ++
 tsconfig.json                        |   2 +-
 20 files changed, 281 insertions(+), 29 deletions(-)
 create mode 100644 src/vue/devtools.ts

diff --git a/examples/2.x-basic/src/App.vue b/examples/2.x-basic/src/App.vue
index e50720b..f9db526 100644
--- a/examples/2.x-basic/src/App.vue
+++ b/examples/2.x-basic/src/App.vue
@@ -1,13 +1,12 @@
 <script lang="ts">
 import { defineComponent, ref } from "@vue/composition-api";
-import { VueQueryDevTools } from "vue-query/devtools";
 
 import Posts from "./Posts.vue";
 import Post from "./Post.vue";
 
 export default defineComponent({
   name: "App",
-  components: { Posts, Post, VueQueryDevTools },
+  components: { Posts, Post },
   setup() {
     const visitedPosts = ref(new Set());
     const isVisited = (id: number) => visitedPosts.value.has(id);
@@ -47,6 +46,5 @@ export default defineComponent({
       @setPostId="setPostId"
     />
     <Posts v-else :isVisited="isVisited" @setPostId="setPostId" />
-    <VueQueryDevTools :initialIsOpen="true" />
   </div>
 </template>
diff --git a/examples/2.x-basic/vite.config.ts b/examples/2.x-basic/vite.config.ts
index cded305..81926e4 100644
--- a/examples/2.x-basic/vite.config.ts
+++ b/examples/2.x-basic/vite.config.ts
@@ -4,4 +4,5 @@ import { createVuePlugin } from "vite-plugin-vue2";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [createVuePlugin()],
+  optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });
diff --git a/examples/basic/src/App.vue b/examples/basic/src/App.vue
index ac043a1..52028d9 100644
--- a/examples/basic/src/App.vue
+++ b/examples/basic/src/App.vue
@@ -1,13 +1,12 @@
 <script lang="ts">
 import { defineComponent, ref } from "vue";
-import { VueQueryDevTools } from "vue-query/devtools";
 
 import Posts from "./Posts.vue";
 import Post from "./Post.vue";
 
 export default defineComponent({
   name: "App",
-  components: { Posts, Post, VueQueryDevTools },
+  components: { Posts, Post },
   setup() {
     const visitedPosts = ref(new Set());
     const isVisited = (id: number) => visitedPosts.value.has(id);
@@ -39,12 +38,6 @@ export default defineComponent({
       sequences)
     </strong>
   </p>
-  <Post
-    v-if="postId > -1"
-    :postId="postId"
-    :style="{}"
-    @setPostId="setPostId"
-  />
+  <Post v-if="postId > -1" :postId="postId" @setPostId="setPostId" />
   <Posts v-else :isVisited="isVisited" @setPostId="setPostId" />
-  <VueQueryDevTools :initialIsOpen="true" />
 </template>
diff --git a/examples/basic/vite.config.ts b/examples/basic/vite.config.ts
index 0a8bd80..50fa87f 100644
--- a/examples/basic/vite.config.ts
+++ b/examples/basic/vite.config.ts
@@ -4,4 +4,5 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });
diff --git a/examples/multi-client/src/App.vue b/examples/multi-client/src/App.vue
index 82037eb..8a6df96 100644
--- a/examples/multi-client/src/App.vue
+++ b/examples/multi-client/src/App.vue
@@ -1,17 +1,15 @@
 <script lang="ts">
 import { defineComponent } from "vue";
-import { VueQueryDevTools } from "vue-query/devtools";
 
 import Todos from "./Todos.vue";
 
 export default defineComponent({
   name: "App",
-  components: { Todos, VueQueryDevTools },
+  components: { Todos },
 });
 </script>
 
 <template>
   <h1>Vue Query - Multi Client</h1>
   <Todos />
-  <VueQueryDevTools :initialIsOpen="true" :queryClientKeys="['Foo', 'Bar']" />
 </template>
diff --git a/examples/multi-client/vite.config.ts b/examples/multi-client/vite.config.ts
index 0a8bd80..50fa87f 100644
--- a/examples/multi-client/vite.config.ts
+++ b/examples/multi-client/vite.config.ts
@@ -4,4 +4,5 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });
diff --git a/examples/multi-page/src/App.vue b/examples/multi-page/src/App.vue
index d8bc809..a57a4fc 100644
--- a/examples/multi-page/src/App.vue
+++ b/examples/multi-page/src/App.vue
@@ -1,11 +1,10 @@
 <script lang="ts">
 import { defineComponent, ref } from "vue";
-import { VueQueryDevTools } from "vue-query/devtools";
 import Page from "./Page.vue";
 
 export default defineComponent({
   name: "App",
-  components: { VueQueryDevTools, Page },
+  components: { Page },
   setup() {
     const firstPage = ref(1);
 
@@ -28,7 +27,6 @@ export default defineComponent({
   <button @click="remove">Remove page</button>
   <Page v-if="firstPage === 1" title="Page1" />
   <Page v-else-if="firstPage === 2" title="Page2" />
-  <VueQueryDevTools :initialIsOpen="true" />
 </template>
 
 <style>
diff --git a/examples/multi-page/vite.config.ts b/examples/multi-page/vite.config.ts
index 0a8bd80..50fa87f 100644
--- a/examples/multi-page/vite.config.ts
+++ b/examples/multi-page/vite.config.ts
@@ -4,4 +4,5 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });
diff --git a/examples/simple/src/App.vue b/examples/simple/src/App.vue
index d34a294..2d4a216 100644
--- a/examples/simple/src/App.vue
+++ b/examples/simple/src/App.vue
@@ -1,17 +1,15 @@
 <script lang="ts">
 import { defineComponent } from "vue";
-import { VueQueryDevTools } from "vue-query/devtools";
 
 import Todos from "./Todos.vue";
 
 export default defineComponent({
   name: "App",
-  components: { Todos, VueQueryDevTools },
+  components: { Todos },
 });
 </script>
 
 <template>
   <h1>Vue Query - Simple</h1>
   <Todos />
-  <VueQueryDevTools :initialIsOpen="true" />
 </template>
diff --git a/examples/simple/vite.config.ts b/examples/simple/vite.config.ts
index 0a8bd80..50fa87f 100644
--- a/examples/simple/vite.config.ts
+++ b/examples/simple/vite.config.ts
@@ -4,4 +4,5 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });
diff --git a/examples/suspense/src/App.vue b/examples/suspense/src/App.vue
index af4ed51..c1a01a7 100644
--- a/examples/suspense/src/App.vue
+++ b/examples/suspense/src/App.vue
@@ -1,12 +1,11 @@
 <script lang="ts">
 import { defineComponent } from "vue";
-import { VueQueryDevTools } from "vue-query/devtools";
 
 import Content from "./Content.vue";
 
 export default defineComponent({
   name: "App",
-  components: { Content, VueQueryDevTools },
+  components: { Content },
 });
 </script>
 
@@ -24,7 +23,6 @@ export default defineComponent({
       <div>Loading...</div>
     </template>
   </Suspense>
-  <VueQueryDevTools :initialIsOpen="true" />
 </template>
 
 <style>
diff --git a/examples/suspense/vite.config.ts b/examples/suspense/vite.config.ts
index 0a8bd80..50fa87f 100644
--- a/examples/suspense/vite.config.ts
+++ b/examples/suspense/vite.config.ts
@@ -4,4 +4,5 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });
diff --git a/package-lock.json b/package-lock.json
index 5602856..085a59d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.0.0-semantic",
       "license": "MIT",
       "dependencies": {
+        "@vue/devtools-api": "^6.1.4",
         "match-sorter": "^6.3.1",
         "react-query": "^3.34.9",
         "vue-demi": "0.10.1"
@@ -1962,6 +1963,11 @@
         "vue": ">= 2.5 < 3"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.1.4.tgz",
+      "integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
+    },
     "node_modules/@vue/eslint-config-prettier": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-7.0.0.tgz",
@@ -10518,6 +10524,11 @@
         "tslib": "^2.3.1"
       }
     },
+    "@vue/devtools-api": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.1.4.tgz",
+      "integrity": "sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ=="
+    },
     "@vue/eslint-config-prettier": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-7.0.0.tgz",
diff --git a/package.json b/package.json
index 611ee2b..b66dfe3 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
   },
   "homepage": "https://github.com/DamianOsipiuk/vue-query#readme",
   "dependencies": {
+    "@vue/devtools-api": "^6.1.4",
     "match-sorter": "^6.3.1",
     "react-query": "^3.34.9",
     "vue-demi": "0.10.1"
diff --git a/rollup.config.ts b/rollup.config.ts
index 17f2add..77ff0bf 100644
--- a/rollup.config.ts
+++ b/rollup.config.ts
@@ -1,3 +1,4 @@
+import { defineConfig } from "rollup";
 import resolve from "@rollup/plugin-node-resolve";
 import postcss from "rollup-plugin-postcss";
 import typescript from "rollup-plugin-typescript2";
@@ -18,7 +19,7 @@ const common = {
     exclude: ["node_modules/**", "tests"],
   },
 };
-export default [
+export default defineConfig([
   {
     input: "src/index.ts",
     output: {
@@ -73,4 +74,4 @@ export default [
     },
     ...common,
   },
-];
+]);
diff --git a/src/devtools/Devtools.vue b/src/devtools/Devtools.vue
index 0165c3f..a47e5fa 100644
--- a/src/devtools/Devtools.vue
+++ b/src/devtools/Devtools.vue
@@ -8,7 +8,12 @@ import { Position } from "./utils";
 
 import type { ButtonProps, PanelProps } from "./types";
 
-export default defineComponent({
+/**
+ * @deprecated Vue Query Devtools are now available as a plugin to the official Vue Devtools.
+ * Standalone devtools will be removed in v2 of vue-query.
+ * Please visit https://vue-query.vercel.app/#/getting-started/devtools for more information.
+ */
+const VueQueryDevTools = defineComponent({
   name: "VueQueryDevTools",
   props: {
     initialIsOpen: {
@@ -155,6 +160,8 @@ export default defineComponent({
     ]);
   },
 });
+
+export default VueQueryDevTools;
 </script>
 
 <style>
diff --git a/src/devtools/DevtoolsPanel.vue b/src/devtools/DevtoolsPanel.vue
index 9cd7e36..74494b2 100644
--- a/src/devtools/DevtoolsPanel.vue
+++ b/src/devtools/DevtoolsPanel.vue
@@ -47,7 +47,12 @@ const getSortedQueries = (queryCache: QueryCache, filterOptions: Options) => {
   }).filter((d) => d.queryHash);
 };
 
-export default defineComponent({
+/**
+ * @deprecated Vue Query Devtools are now available as a plugin to the official Vue Devtools.
+ * Standalone devtools will be removed in v2 of vue-query.
+ * Please visit https://vue-query.vercel.app/#/getting-started/devtools for more information.
+ */
+const DevtoolsPanel = defineComponent({
   name: "DevtoolsPanel",
   props: {
     isOpen: {
@@ -64,6 +69,13 @@ export default defineComponent({
     },
   },
   setup(props, { emit }) {
+    if (process.env.NODE_ENV === "development") {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `[vue-query] Deprecation warning: Vue Query Devtools are now available as a plugin to the official Vue Devtools.\nStandalone devtools will be removed in v2 of vue-query.\nPlease visit https://vue-query.vercel.app/#/getting-started/devtools for more information.`
+      );
+    }
+
     let queryCache: QueryCache;
     let unsubscribe = () => {
       // NOOP
@@ -247,6 +259,8 @@ export default defineComponent({
     );
   },
 });
+
+export default DevtoolsPanel;
 </script>
 
 <style>
diff --git a/src/vue/devtools.ts b/src/vue/devtools.ts
new file mode 100644
index 0000000..8a2aaa8
--- /dev/null
+++ b/src/vue/devtools.ts
@@ -0,0 +1,219 @@
+import { CustomInspectorNode, setupDevtoolsPlugin } from "@vue/devtools-api";
+import { matchSorter } from "match-sorter";
+import { QueryClient } from "./queryClient";
+import type { Query } from "react-query/core";
+
+const pluginId = "vue-query";
+const pluginName = "Vue Query";
+
+enum QueryState {
+  Fetching = 0,
+  Fresh,
+  Stale,
+  Inactive,
+}
+
+function getQueryState(query: Query): QueryState {
+  if (query.isFetching()) {
+    return QueryState.Fetching;
+  }
+  if (!query.getObserversCount()) {
+    return QueryState.Inactive;
+  }
+  if (query.isStale()) {
+    return QueryState.Stale;
+  }
+
+  return QueryState.Fresh;
+}
+
+function getQueryStateLabel(query: Query): string {
+  const queryState = getQueryState(query);
+
+  if (queryState === QueryState.Fetching) {
+    return "fetching";
+  }
+  if (queryState === QueryState.Stale) {
+    return "stale";
+  }
+  if (queryState === QueryState.Inactive) {
+    return "inactive";
+  }
+
+  return "fresh";
+}
+
+function getQueryStatusFg(query: Query): number {
+  const queryState = getQueryState(query);
+
+  if (queryState === QueryState.Stale) {
+    return 0x000000;
+  }
+
+  return 0xffffff;
+}
+
+function getQueryStatusBg(query: Query): number {
+  const queryState = getQueryState(query);
+
+  if (queryState === QueryState.Fetching) {
+    return 0x006bff;
+  }
+  if (queryState === QueryState.Stale) {
+    return 0xffb200;
+  }
+  if (queryState === QueryState.Inactive) {
+    return 0x3f4e60;
+  }
+
+  return 0x008327;
+}
+
+export function setupDevtools(app: any, queryClient: QueryClient) {
+  setupDevtoolsPlugin(
+    {
+      id: pluginId,
+      label: pluginName,
+      packageName: "vue-query",
+      homepage: "https://github.com/DamianOsipiuk/vue-query",
+      logo: "https://vue-query.vercel.app/vue-query.svg",
+      app,
+    },
+    (api) => {
+      const queryCache = queryClient.getQueryCache();
+      queryCache.subscribe((event) => {
+        api.sendInspectorTree(pluginId);
+        api.sendInspectorState(pluginId);
+
+        if (
+          event &&
+          ["queryAdded", "queryRemoved", "queryUpdated"].includes(event.type)
+        ) {
+          api.addTimelineEvent({
+            layerId: pluginId,
+            event: {
+              title: event.type,
+              subtitle: event.query.queryHash,
+              time: api.now(),
+              data: {
+                queryHash: event.query.queryHash,
+                ...event,
+              },
+            },
+          });
+        }
+      });
+
+      api.addInspector({
+        id: pluginId,
+        label: pluginName,
+        icon: "api",
+        nodeActions: [
+          {
+            icon: "cloud_download",
+            tooltip: "Refetch",
+            action: (queryHash: string) => {
+              queryCache.get(queryHash)?.fetch();
+            },
+          },
+          {
+            icon: "alarm",
+            tooltip: "Invalidate",
+            action: (queryHash: string) => {
+              const query = queryCache.get(queryHash) as Query;
+              queryClient.invalidateQueries(query.queryKey);
+            },
+          },
+          {
+            icon: "settings_backup_restore",
+            tooltip: "Reset",
+            action: (queryHash: string) => {
+              queryCache.get(queryHash)?.reset();
+            },
+          },
+          {
+            icon: "delete",
+            tooltip: "Remove",
+            action: (queryHash: string) => {
+              const query = queryCache.get(queryHash) as Query;
+              queryCache.remove(query);
+            },
+          },
+        ],
+      });
+
+      api.on.getInspectorTree((payload) => {
+        if (payload.inspectorId === pluginId) {
+          const queries: Query[] = queryCache.getAll();
+          const filtered = matchSorter(queries, payload.filter, {
+            keys: ["queryHash"],
+            baseSort: (a, b) =>
+              String(a.rankedValue).localeCompare(b.rankedValue), //  (* -1) for desc sort
+          });
+
+          const nodes: CustomInspectorNode[] = filtered.map((query) => {
+            const stateLabel = getQueryStateLabel(query);
+
+            return {
+              id: query.queryHash,
+              label: query.queryHash,
+              tags: [
+                {
+                  label: `${stateLabel} [${query.getObserversCount()}]`,
+                  textColor: getQueryStatusFg(query),
+                  backgroundColor: getQueryStatusBg(query),
+                },
+              ],
+            };
+          });
+          payload.rootNodes = nodes;
+        }
+      });
+
+      api.on.getInspectorState((payload) => {
+        if (payload.inspectorId === pluginId) {
+          const query = queryCache.get(payload.nodeId) as Query;
+
+          payload.state = {
+            " Query Details": [
+              {
+                key: "Query key",
+                value: query.queryHash as string,
+              },
+              {
+                key: "Query status",
+                value: getQueryStateLabel(query),
+              },
+              {
+                key: "Observers",
+                value: query.getObserversCount(),
+              },
+              {
+                key: "Last Updated",
+                value: new Date(query.state.dataUpdatedAt).toLocaleTimeString(),
+              },
+            ],
+            "Data Explorer": [
+              {
+                key: "Data",
+                value: query.state.data,
+              },
+            ],
+            "Query Explorer": [
+              {
+                key: "Query",
+                value: query,
+              },
+            ],
+          };
+        }
+      });
+
+      api.addTimelineLayer({
+        id: pluginId,
+        label: pluginName,
+        color: 0xffd94c,
+      });
+    }
+  );
+}
diff --git a/src/vue/vueQueryPlugin.ts b/src/vue/vueQueryPlugin.ts
index 1ab35fd..0238dc5 100644
--- a/src/vue/vueQueryPlugin.ts
+++ b/src/vue/vueQueryPlugin.ts
@@ -4,6 +4,7 @@ import { QueryClient } from "react-query/core";
 import type { QueryClientConfig } from "react-query/types/core";
 
 import { getClientKey } from "./utils";
+import { setupDevtools } from "./devtools";
 
 export interface AdditionalClient {
   queryClient: QueryClient;
@@ -75,6 +76,11 @@ export const VueQueryPlugin = {
             this._provided[key] = additionalClient.queryClient;
             additionalClient.queryClient.mount();
           });
+
+          // @ts-expect-error Threeshakeable flags
+          if (process.env.NODE_ENV === "development" || __VUE_PROD_DEVTOOLS__) {
+            setupDevtools(this, client);
+          }
         },
       });
     } else {
@@ -86,5 +92,9 @@ export const VueQueryPlugin = {
         additionalClient.queryClient.mount();
       });
     }
+    // @ts-expect-error Threeshakeable flags
+    if (process.env.NODE_ENV === "development" || __VUE_PROD_DEVTOOLS__) {
+      setupDevtools(app, client);
+    }
   },
 };
diff --git a/tsconfig.json b/tsconfig.json
index 0fdd722..a2b9f9a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,7 +6,7 @@
     "module": "ESNext",
     "moduleResolution": "node",
     "declaration": true,
-    "removeComments": true,
+    "removeComments": false,
     "strict": true,
     "noUnusedLocals": true,
     "noImplicitReturns": true,

From 4fdc7e75896e16831eb4219ea54d5f192d9a0483 Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Thu, 31 Mar 2022 19:28:59 +0200
Subject: [PATCH 2/9] docs: devtools v2

---
 docs/getting-started/devtools.md | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/docs/getting-started/devtools.md b/docs/getting-started/devtools.md
index f595d14..5c33639 100644
--- a/docs/getting-started/devtools.md
+++ b/docs/getting-started/devtools.md
@@ -2,6 +2,13 @@ Wave your hands in the air and shout hooray because Vue Query comes with dedicat
 
 When you begin your Vue Query journey, you'll want these DevTools by your side. They help visualize all of the inner workings of Vue Query and will likely save you hours of debugging if you find yourself in a pinch!
 
+**The only thing you need to do is to install official [Vue Devtools](https://devtools.vuejs.org/guide/installation.html)**
+
+Vue Query will seemingly integrate with official devtools, adding custom inspector and timeline events.
+Devtools would be treeshaken from production bundles by default.
+
+# **Deprecated**: standalone devtools
+
 ## Import the Devtools
 
 The DevTools are bundle split into the vue-query/devtools package. No need to install anything extra, just:
@@ -68,7 +75,7 @@ export default defineComponent({
 </script>
 
 <template>
-  <VueQueryDevToolsPanel :style={styles} :className={className} />
+  <VueQueryDevToolsPanel :style="{ styles }" :className="{ className }" />
 </template>
 ```
 

From 79d81e8dff57805c0a265ff0f6ddb9620fa7185d Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Thu, 31 Mar 2022 19:52:34 +0200
Subject: [PATCH 3/9] test: accomodate for new devtools

---
 jest.config.ts                           |  4 ++++
 src/vue/__tests__/vueQueryPlugin.test.ts | 13 +++++++++++++
 src/vue/devtools.ts                      |  2 ++
 3 files changed, 19 insertions(+)

diff --git a/jest.config.ts b/jest.config.ts
index 1b03dd8..df1ac5a 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -18,6 +18,10 @@ const config: Config.InitialOptions = {
     // Exlude devtools
     "!src/devtools/**/*",
   ],
+  globals: {
+    "ts-jest": {},
+    __VUE_PROD_DEVTOOLS__: false,
+  },
 };
 
 export default config;
diff --git a/src/vue/__tests__/vueQueryPlugin.test.ts b/src/vue/__tests__/vueQueryPlugin.test.ts
index 16a197f..08808b9 100644
--- a/src/vue/__tests__/vueQueryPlugin.test.ts
+++ b/src/vue/__tests__/vueQueryPlugin.test.ts
@@ -4,6 +4,9 @@ import { QueryClient } from "react-query/types/core";
 
 import { VueQueryPlugin } from "../vueQueryPlugin";
 import { VUE_QUERY_CLIENT } from "../utils";
+import { setupDevtools } from "../devtools";
+
+jest.mock("../devtools");
 
 interface TestApp extends App {
   onUnmount: Function;
@@ -36,6 +39,16 @@ describe("VueQueryPlugin", () => {
     jest.clearAllMocks();
   });
 
+  test("should setup devtools", () => {
+    // @ts-ignore
+    global.__VUE_PROD_DEVTOOLS__ = true;
+    const setupDevtoolsMock = setupDevtools as jest.Mock;
+    const appMock = getAppMock();
+    VueQueryPlugin.install?.(appMock);
+
+    expect(setupDevtoolsMock).toHaveBeenCalledTimes(1);
+  });
+
   describe("when app unmounts", () => {
     test("should call unmount on each client when onUnmount is missing", () => {
       const appMock = getAppMock();
diff --git a/src/vue/devtools.ts b/src/vue/devtools.ts
index 8a2aaa8..f07900e 100644
--- a/src/vue/devtools.ts
+++ b/src/vue/devtools.ts
@@ -1,3 +1,5 @@
+/* istanbul ignore file */
+
 import { CustomInspectorNode, setupDevtoolsPlugin } from "@vue/devtools-api";
 import { matchSorter } from "match-sorter";
 import { QueryClient } from "./queryClient";

From 769a0505983fdd60c2bcdb171d1286733122962f Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Fri, 1 Apr 2022 23:20:23 +0200
Subject: [PATCH 4/9] chore: fix codesandbox

---
 examples/2.x-basic/vite.config.ts    | 1 -
 examples/basic/vite.config.ts        | 1 -
 examples/multi-client/vite.config.ts | 1 -
 examples/multi-page/vite.config.ts   | 1 -
 examples/simple/vite.config.ts       | 1 -
 examples/suspense/vite.config.ts     | 1 -
 6 files changed, 6 deletions(-)

diff --git a/examples/2.x-basic/vite.config.ts b/examples/2.x-basic/vite.config.ts
index 81926e4..cded305 100644
--- a/examples/2.x-basic/vite.config.ts
+++ b/examples/2.x-basic/vite.config.ts
@@ -4,5 +4,4 @@ import { createVuePlugin } from "vite-plugin-vue2";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [createVuePlugin()],
-  optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });
diff --git a/examples/basic/vite.config.ts b/examples/basic/vite.config.ts
index 50fa87f..0a8bd80 100644
--- a/examples/basic/vite.config.ts
+++ b/examples/basic/vite.config.ts
@@ -4,5 +4,4 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
-  optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });
diff --git a/examples/multi-client/vite.config.ts b/examples/multi-client/vite.config.ts
index 50fa87f..0a8bd80 100644
--- a/examples/multi-client/vite.config.ts
+++ b/examples/multi-client/vite.config.ts
@@ -4,5 +4,4 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
-  optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });
diff --git a/examples/multi-page/vite.config.ts b/examples/multi-page/vite.config.ts
index 50fa87f..0a8bd80 100644
--- a/examples/multi-page/vite.config.ts
+++ b/examples/multi-page/vite.config.ts
@@ -4,5 +4,4 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
-  optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });
diff --git a/examples/simple/vite.config.ts b/examples/simple/vite.config.ts
index 50fa87f..0a8bd80 100644
--- a/examples/simple/vite.config.ts
+++ b/examples/simple/vite.config.ts
@@ -4,5 +4,4 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
-  optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });
diff --git a/examples/suspense/vite.config.ts b/examples/suspense/vite.config.ts
index 50fa87f..0a8bd80 100644
--- a/examples/suspense/vite.config.ts
+++ b/examples/suspense/vite.config.ts
@@ -4,5 +4,4 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
-  optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });

From a4240a28a5ae5d5ae68cd6385b12ebd5ecda9b02 Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Sat, 2 Apr 2022 23:08:50 +0200
Subject: [PATCH 5/9] feat: sorting via plugin settings

---
 examples/2.x-basic/vite.config.ts    |   2 +
 examples/basic/vite.config.ts        |   2 +
 examples/multi-client/vite.config.ts |   2 +
 examples/multi-page/vite.config.ts   |   2 +
 examples/simple/vite.config.ts       |   2 +
 examples/suspense/vite.config.ts     |   2 +
 package.json                         |   1 +
 rollup.config.ts                     |   2 +-
 src/vue/{ => devtools}/devtools.ts   | 158 +++++++++++----------------
 src/vue/devtools/utils.ts            |  86 +++++++++++++++
 src/vue/vueQueryPlugin.ts            |   2 +-
 11 files changed, 166 insertions(+), 95 deletions(-)
 rename src/vue/{ => devtools}/devtools.ts (77%)
 create mode 100644 src/vue/devtools/utils.ts

diff --git a/examples/2.x-basic/vite.config.ts b/examples/2.x-basic/vite.config.ts
index cded305..e80a2f0 100644
--- a/examples/2.x-basic/vite.config.ts
+++ b/examples/2.x-basic/vite.config.ts
@@ -4,4 +4,6 @@ import { createVuePlugin } from "vite-plugin-vue2";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [createVuePlugin()],
+  // For dev purpose, when using `npm link`. This breaks codesandbox somehow.
+  // optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });
diff --git a/examples/basic/vite.config.ts b/examples/basic/vite.config.ts
index 0a8bd80..b538036 100644
--- a/examples/basic/vite.config.ts
+++ b/examples/basic/vite.config.ts
@@ -4,4 +4,6 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  // For dev purpose, when using `npm link`. This breaks codesandbox somehow.
+  optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });
diff --git a/examples/multi-client/vite.config.ts b/examples/multi-client/vite.config.ts
index 0a8bd80..1b18f9d 100644
--- a/examples/multi-client/vite.config.ts
+++ b/examples/multi-client/vite.config.ts
@@ -4,4 +4,6 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  // For dev purpose, when using `npm link`. This breaks codesandbox somehow.
+  // optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });
diff --git a/examples/multi-page/vite.config.ts b/examples/multi-page/vite.config.ts
index 0a8bd80..1b18f9d 100644
--- a/examples/multi-page/vite.config.ts
+++ b/examples/multi-page/vite.config.ts
@@ -4,4 +4,6 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  // For dev purpose, when using `npm link`. This breaks codesandbox somehow.
+  // optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });
diff --git a/examples/simple/vite.config.ts b/examples/simple/vite.config.ts
index 0a8bd80..1b18f9d 100644
--- a/examples/simple/vite.config.ts
+++ b/examples/simple/vite.config.ts
@@ -4,4 +4,6 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  // For dev purpose, when using `npm link`. This breaks codesandbox somehow.
+  // optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });
diff --git a/examples/suspense/vite.config.ts b/examples/suspense/vite.config.ts
index 0a8bd80..1b18f9d 100644
--- a/examples/suspense/vite.config.ts
+++ b/examples/suspense/vite.config.ts
@@ -4,4 +4,6 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  // For dev purpose, when using `npm link`. This breaks codesandbox somehow.
+  // optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });
diff --git a/package.json b/package.json
index b66dfe3..90b6f6b 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   "scripts": {
     "prepare": "husky install",
     "build": "rollup -c rollup.config.ts",
+    "watch": "rollup -c rollup.config.ts -w",
     "lint": "eslint ./src/**/*.{ts,vue}",
     "test": "npm run test:2 && npm run test:3",
     "test:2": "vue-demi-switch 2 vue2 && jest",
diff --git a/rollup.config.ts b/rollup.config.ts
index 77ff0bf..5270c32 100644
--- a/rollup.config.ts
+++ b/rollup.config.ts
@@ -16,7 +16,7 @@ const common = {
   ],
   watch: {
     include: "src/**",
-    exclude: ["node_modules/**", "tests"],
+    exclude: ["node_modules/**", "__tests__", "__mocks__"],
   },
 };
 export default defineConfig([
diff --git a/src/vue/devtools.ts b/src/vue/devtools/devtools.ts
similarity index 77%
rename from src/vue/devtools.ts
rename to src/vue/devtools/devtools.ts
index f07900e..0f01852 100644
--- a/src/vue/devtools.ts
+++ b/src/vue/devtools/devtools.ts
@@ -2,75 +2,18 @@
 
 import { CustomInspectorNode, setupDevtoolsPlugin } from "@vue/devtools-api";
 import { matchSorter } from "match-sorter";
-import { QueryClient } from "./queryClient";
 import type { Query } from "react-query/core";
+import { QueryClient } from "../queryClient";
+import {
+  getQueryStateLabel,
+  getQueryStatusBg,
+  getQueryStatusFg,
+  sortFns,
+} from "./utils";
 
 const pluginId = "vue-query";
 const pluginName = "Vue Query";
 
-enum QueryState {
-  Fetching = 0,
-  Fresh,
-  Stale,
-  Inactive,
-}
-
-function getQueryState(query: Query): QueryState {
-  if (query.isFetching()) {
-    return QueryState.Fetching;
-  }
-  if (!query.getObserversCount()) {
-    return QueryState.Inactive;
-  }
-  if (query.isStale()) {
-    return QueryState.Stale;
-  }
-
-  return QueryState.Fresh;
-}
-
-function getQueryStateLabel(query: Query): string {
-  const queryState = getQueryState(query);
-
-  if (queryState === QueryState.Fetching) {
-    return "fetching";
-  }
-  if (queryState === QueryState.Stale) {
-    return "stale";
-  }
-  if (queryState === QueryState.Inactive) {
-    return "inactive";
-  }
-
-  return "fresh";
-}
-
-function getQueryStatusFg(query: Query): number {
-  const queryState = getQueryState(query);
-
-  if (queryState === QueryState.Stale) {
-    return 0x000000;
-  }
-
-  return 0xffffff;
-}
-
-function getQueryStatusBg(query: Query): number {
-  const queryState = getQueryState(query);
-
-  if (queryState === QueryState.Fetching) {
-    return 0x006bff;
-  }
-  if (queryState === QueryState.Stale) {
-    return 0xffb200;
-  }
-  if (queryState === QueryState.Inactive) {
-    return 0x3f4e60;
-  }
-
-  return 0x008327;
-}
-
 export function setupDevtools(app: any, queryClient: QueryClient) {
   setupDevtoolsPlugin(
     {
@@ -80,31 +23,36 @@ export function setupDevtools(app: any, queryClient: QueryClient) {
       homepage: "https://github.com/DamianOsipiuk/vue-query",
       logo: "https://vue-query.vercel.app/vue-query.svg",
       app,
+      settings: {
+        baseSort: {
+          type: "choice",
+          component: "button-group",
+          label: "Sort Cache Entries",
+          options: [
+            {
+              label: "ASC",
+              value: 1,
+            },
+            {
+              label: "DESC",
+              value: -1,
+            },
+          ],
+          defaultValue: 1,
+        },
+        sortFn: {
+          type: "choice",
+          label: "Sort Function",
+          options: Object.keys(sortFns).map((key) => ({
+            label: key,
+            value: key,
+          })),
+          defaultValue: Object.keys(sortFns)[0],
+        },
+      },
     },
     (api) => {
       const queryCache = queryClient.getQueryCache();
-      queryCache.subscribe((event) => {
-        api.sendInspectorTree(pluginId);
-        api.sendInspectorState(pluginId);
-
-        if (
-          event &&
-          ["queryAdded", "queryRemoved", "queryUpdated"].includes(event.type)
-        ) {
-          api.addTimelineEvent({
-            layerId: pluginId,
-            event: {
-              title: event.type,
-              subtitle: event.query.queryHash,
-              time: api.now(),
-              data: {
-                queryHash: event.query.queryHash,
-                ...event,
-              },
-            },
-          });
-        }
-      });
 
       api.addInspector({
         id: pluginId,
@@ -144,13 +92,43 @@ export function setupDevtools(app: any, queryClient: QueryClient) {
         ],
       });
 
+      api.addTimelineLayer({
+        id: pluginId,
+        label: pluginName,
+        color: 0xffd94c,
+      });
+
+      queryCache.subscribe((event) => {
+        api.sendInspectorTree(pluginId);
+        api.sendInspectorState(pluginId);
+
+        if (
+          event &&
+          ["queryAdded", "queryRemoved", "queryUpdated"].includes(event.type)
+        ) {
+          api.addTimelineEvent({
+            layerId: pluginId,
+            event: {
+              title: event.type,
+              subtitle: event.query.queryHash,
+              time: api.now(),
+              data: {
+                queryHash: event.query.queryHash,
+                ...event,
+              },
+            },
+          });
+        }
+      });
+
       api.on.getInspectorTree((payload) => {
         if (payload.inspectorId === pluginId) {
           const queries: Query[] = queryCache.getAll();
+          const settings = api.getSettings();
           const filtered = matchSorter(queries, payload.filter, {
             keys: ["queryHash"],
             baseSort: (a, b) =>
-              String(a.rankedValue).localeCompare(b.rankedValue), //  (* -1) for desc sort
+              sortFns[settings.sortFn](a.item, b.item) * settings.baseSort,
           });
 
           const nodes: CustomInspectorNode[] = filtered.map((query) => {
@@ -210,12 +188,6 @@ export function setupDevtools(app: any, queryClient: QueryClient) {
           };
         }
       });
-
-      api.addTimelineLayer({
-        id: pluginId,
-        label: pluginName,
-        color: 0xffd94c,
-      });
     }
   );
 }
diff --git a/src/vue/devtools/utils.ts b/src/vue/devtools/utils.ts
new file mode 100644
index 0000000..d4e0012
--- /dev/null
+++ b/src/vue/devtools/utils.ts
@@ -0,0 +1,86 @@
+import type { Query } from "react-query/core";
+
+type SortFn = (a: Query, b: Query) => number;
+
+enum QueryState {
+  Fetching = 0,
+  Fresh,
+  Stale,
+  Inactive,
+}
+
+export function getQueryState(query: Query): QueryState {
+  if (query.isFetching()) {
+    return QueryState.Fetching;
+  }
+  if (!query.getObserversCount()) {
+    return QueryState.Inactive;
+  }
+  if (query.isStale()) {
+    return QueryState.Stale;
+  }
+
+  return QueryState.Fresh;
+}
+
+export function getQueryStateLabel(query: Query): string {
+  const queryState = getQueryState(query);
+
+  if (queryState === QueryState.Fetching) {
+    return "fetching";
+  }
+  if (queryState === QueryState.Stale) {
+    return "stale";
+  }
+  if (queryState === QueryState.Inactive) {
+    return "inactive";
+  }
+
+  return "fresh";
+}
+
+export function getQueryStatusFg(query: Query): number {
+  const queryState = getQueryState(query);
+
+  if (queryState === QueryState.Stale) {
+    return 0x000000;
+  }
+
+  return 0xffffff;
+}
+
+export function getQueryStatusBg(query: Query): number {
+  const queryState = getQueryState(query);
+
+  if (queryState === QueryState.Fetching) {
+    return 0x006bff;
+  }
+  if (queryState === QueryState.Stale) {
+    return 0xffb200;
+  }
+  if (queryState === QueryState.Inactive) {
+    return 0x3f4e60;
+  }
+
+  return 0x008327;
+}
+
+const queryHashSort: SortFn = (a, b) =>
+  String(a.queryHash).localeCompare(b.queryHash);
+
+const dateSort: SortFn = (a, b) =>
+  a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1;
+
+const statusAndDateSort: SortFn = (a, b) => {
+  if (getQueryState(a) === getQueryState(b)) {
+    return dateSort(a, b);
+  }
+
+  return getQueryState(a) > getQueryState(b) ? 1 : -1;
+};
+
+export const sortFns: Record<string, SortFn> = {
+  "Status > Last Updated": statusAndDateSort,
+  "Query Hash": queryHashSort,
+  "Last Updated": dateSort,
+};
diff --git a/src/vue/vueQueryPlugin.ts b/src/vue/vueQueryPlugin.ts
index 0238dc5..98db61b 100644
--- a/src/vue/vueQueryPlugin.ts
+++ b/src/vue/vueQueryPlugin.ts
@@ -4,7 +4,7 @@ import { QueryClient } from "react-query/core";
 import type { QueryClientConfig } from "react-query/types/core";
 
 import { getClientKey } from "./utils";
-import { setupDevtools } from "./devtools";
+import { setupDevtools } from "./devtools/devtools";
 
 export interface AdditionalClient {
   queryClient: QueryClient;

From 2e8b35b773c09b152c804af452092c80d4b9095a Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Sat, 2 Apr 2022 23:11:59 +0200
Subject: [PATCH 6/9] fix: test

---
 src/vue/__tests__/vueQueryPlugin.test.ts | 2 +-
 src/vue/devtools/utils.ts                | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/vue/__tests__/vueQueryPlugin.test.ts b/src/vue/__tests__/vueQueryPlugin.test.ts
index 08808b9..85e822d 100644
--- a/src/vue/__tests__/vueQueryPlugin.test.ts
+++ b/src/vue/__tests__/vueQueryPlugin.test.ts
@@ -4,7 +4,7 @@ import { QueryClient } from "react-query/types/core";
 
 import { VueQueryPlugin } from "../vueQueryPlugin";
 import { VUE_QUERY_CLIENT } from "../utils";
-import { setupDevtools } from "../devtools";
+import { setupDevtools } from "../devtools/devtools";
 
 jest.mock("../devtools");
 
diff --git a/src/vue/devtools/utils.ts b/src/vue/devtools/utils.ts
index d4e0012..db68d01 100644
--- a/src/vue/devtools/utils.ts
+++ b/src/vue/devtools/utils.ts
@@ -1,3 +1,5 @@
+/* istanbul ignore file */
+
 import type { Query } from "react-query/core";
 
 type SortFn = (a: Query, b: Query) => number;

From 6adde50ef30ea602d0efb5b7df163c61856f33c9 Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Sat, 2 Apr 2022 23:13:55 +0200
Subject: [PATCH 7/9] fix: basic codesandbox

---
 examples/basic/vite.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/basic/vite.config.ts b/examples/basic/vite.config.ts
index b538036..1b18f9d 100644
--- a/examples/basic/vite.config.ts
+++ b/examples/basic/vite.config.ts
@@ -5,5 +5,5 @@ import vue from "@vitejs/plugin-vue";
 export default defineConfig({
   plugins: [vue()],
   // For dev purpose, when using `npm link`. This breaks codesandbox somehow.
-  optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
+  // optimizeDeps: { exclude: ["vue-query", "vue-demi"] },
 });

From 536d8004af0da61f3989e4bff66a969c0d790483 Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Sat, 2 Apr 2022 23:15:32 +0200
Subject: [PATCH 8/9] fix: test

---
 jest.config.ts                           | 1 +
 src/devtools/index.ts                    | 2 --
 src/vue/__tests__/vueQueryPlugin.test.ts | 2 +-
 src/vue/devtools/devtools.ts             | 2 --
 src/vue/devtools/utils.ts                | 2 --
 5 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/jest.config.ts b/jest.config.ts
index df1ac5a..438e9c2 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -17,6 +17,7 @@ const config: Config.InitialOptions = {
     "!src/**/*.d.ts",
     // Exlude devtools
     "!src/devtools/**/*",
+    "!src/vue/devtools/**/*",
   ],
   globals: {
     "ts-jest": {},
diff --git a/src/devtools/index.ts b/src/devtools/index.ts
index f675295..dcedfff 100644
--- a/src/devtools/index.ts
+++ b/src/devtools/index.ts
@@ -1,5 +1,3 @@
-/* istanbul ignore file */
-
 export { default as VueQueryDevTools } from "./Devtools.vue";
 export { default as VueQueryDevToolsPanel } from "./DevtoolsPanel.vue";
 export { VUE_QUERY_DEVTOOLS_THEME } from "./useTheme";
diff --git a/src/vue/__tests__/vueQueryPlugin.test.ts b/src/vue/__tests__/vueQueryPlugin.test.ts
index 85e822d..d09a1a8 100644
--- a/src/vue/__tests__/vueQueryPlugin.test.ts
+++ b/src/vue/__tests__/vueQueryPlugin.test.ts
@@ -6,7 +6,7 @@ import { VueQueryPlugin } from "../vueQueryPlugin";
 import { VUE_QUERY_CLIENT } from "../utils";
 import { setupDevtools } from "../devtools/devtools";
 
-jest.mock("../devtools");
+jest.mock("../devtools/devtools");
 
 interface TestApp extends App {
   onUnmount: Function;
diff --git a/src/vue/devtools/devtools.ts b/src/vue/devtools/devtools.ts
index 0f01852..fe7db8a 100644
--- a/src/vue/devtools/devtools.ts
+++ b/src/vue/devtools/devtools.ts
@@ -1,5 +1,3 @@
-/* istanbul ignore file */
-
 import { CustomInspectorNode, setupDevtoolsPlugin } from "@vue/devtools-api";
 import { matchSorter } from "match-sorter";
 import type { Query } from "react-query/core";
diff --git a/src/vue/devtools/utils.ts b/src/vue/devtools/utils.ts
index db68d01..d4e0012 100644
--- a/src/vue/devtools/utils.ts
+++ b/src/vue/devtools/utils.ts
@@ -1,5 +1,3 @@
-/* istanbul ignore file */
-
 import type { Query } from "react-query/core";
 
 type SortFn = (a: Query, b: Query) => number;

From c34e9b13fda2699fd28f7033bfa43f8adeea7ac8 Mon Sep 17 00:00:00 2001
From: Damian Osipiuk <osipiukd+git@gmail.com>
Date: Sat, 2 Apr 2022 23:27:13 +0200
Subject: [PATCH 9/9] test: add test for prod env

---
 src/vue/__tests__/vueQueryPlugin.test.ts | 26 ++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/vue/__tests__/vueQueryPlugin.test.ts b/src/vue/__tests__/vueQueryPlugin.test.ts
index d09a1a8..1a42846 100644
--- a/src/vue/__tests__/vueQueryPlugin.test.ts
+++ b/src/vue/__tests__/vueQueryPlugin.test.ts
@@ -39,14 +39,24 @@ describe("VueQueryPlugin", () => {
     jest.clearAllMocks();
   });
 
-  test("should setup devtools", () => {
-    // @ts-ignore
-    global.__VUE_PROD_DEVTOOLS__ = true;
-    const setupDevtoolsMock = setupDevtools as jest.Mock;
-    const appMock = getAppMock();
-    VueQueryPlugin.install?.(appMock);
-
-    expect(setupDevtoolsMock).toHaveBeenCalledTimes(1);
+  describe("devtools", () => {
+    test("should NOT setup devtools", () => {
+      const setupDevtoolsMock = setupDevtools as jest.Mock;
+      const appMock = getAppMock();
+      VueQueryPlugin.install?.(appMock);
+
+      expect(setupDevtoolsMock).toHaveBeenCalledTimes(0);
+    });
+
+    test("should setup devtools", () => {
+      // @ts-ignore
+      global.__VUE_PROD_DEVTOOLS__ = true;
+      const setupDevtoolsMock = setupDevtools as jest.Mock;
+      const appMock = getAppMock();
+      VueQueryPlugin.install?.(appMock);
+
+      expect(setupDevtoolsMock).toHaveBeenCalledTimes(1);
+    });
   });
 
   describe("when app unmounts", () => {