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>
 ```
 
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..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/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..1b18f9d 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/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..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/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..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/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..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/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..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/jest.config.ts b/jest.config.ts
index 1b03dd8..438e9c2 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -17,7 +17,12 @@ const config: Config.InitialOptions = {
     "!src/**/*.d.ts",
     // Exlude devtools
     "!src/devtools/**/*",
+    "!src/vue/devtools/**/*",
   ],
+  globals: {
+    "ts-jest": {},
+    __VUE_PROD_DEVTOOLS__: false,
+  },
 };
 
 export default config;
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..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",
@@ -40,6 +41,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..5270c32 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";
@@ -15,10 +16,10 @@ const common = {
   ],
   watch: {
     include: "src/**",
-    exclude: ["node_modules/**", "tests"],
+    exclude: ["node_modules/**", "__tests__", "__mocks__"],
   },
 };
-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/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 16a197f..1a42846 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/devtools";
+
+jest.mock("../devtools/devtools");
 
 interface TestApp extends App {
   onUnmount: Function;
@@ -36,6 +39,26 @@ describe("VueQueryPlugin", () => {
     jest.clearAllMocks();
   });
 
+  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", () => {
     test("should call unmount on each client when onUnmount is missing", () => {
       const appMock = getAppMock();
diff --git a/src/vue/devtools/devtools.ts b/src/vue/devtools/devtools.ts
new file mode 100644
index 0000000..fe7db8a
--- /dev/null
+++ b/src/vue/devtools/devtools.ts
@@ -0,0 +1,191 @@
+import { CustomInspectorNode, setupDevtoolsPlugin } from "@vue/devtools-api";
+import { matchSorter } from "match-sorter";
+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";
+
+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,
+      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();
+
+      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.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) =>
+              sortFns[settings.sortFn](a.item, b.item) * settings.baseSort,
+          });
+
+          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,
+              },
+            ],
+          };
+        }
+      });
+    }
+  );
+}
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 1ab35fd..98db61b 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/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,