@tanstack/vue-query-devtools 5.90.2 → 6.0.0

package/dist/cjs/devtoolsPanel.vue.cjs

@@ -0,0 +1,62 @@
+"use strict";
+const vue = require("vue");
+const vueQuery = require("@tanstack/vue-query");
+const queryDevtools = require("@tanstack/query-devtools");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "devtoolsPanel",
+  props: {
+    client: {},
+    errorTypes: {},
+    styleNonce: {},
+    shadowDOMTarget: {},
+    style: {},
+    onClose: { type: Function },
+    hideDisabledQueries: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const style = vue.computed(() => {
+      return {
+        height: "500px",
+        ...props.style
+      };
+    });
+    const div = vue.ref();
+    const client = props.client || vueQuery.useQueryClient();
+    const devtools = new queryDevtools.TanstackQueryDevtoolsPanel({
+      client,
+      queryFlavor: "Vue Query",
+      version: "5",
+      onlineManager: vueQuery.onlineManager,
+      buttonPosition: "bottom-left",
+      position: "bottom",
+      initialIsOpen: true,
+      errorTypes: props.errorTypes,
+      styleNonce: props.styleNonce,
+      shadowDOMTarget: props.shadowDOMTarget,
+      hideDisabledQueries: props.hideDisabledQueries,
+      onClose: props.onClose
+    });
+    vue.watchEffect(() => {
+      devtools.setOnClose(props.onClose ?? (() => {
+      }));
+      devtools.setErrorTypes(props.errorTypes || []);
+    });
+    vue.onMounted(() => {
+      devtools.mount(div.value);
+    });
+    vue.onScopeDispose(() => {
+      devtools.unmount();
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        style: vue.normalizeStyle(style.value),
+        className: "tsqd-parent-container",
+        ref_key: "div",
+        ref: div
+      }, null, 4);
+    };
+  }
+});
+module.exports = _sfc_main;
+//# sourceMappingURL=devtoolsPanel.vue.cjs.map

package/dist/cjs/devtoolsPanel.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtoolsPanel.vue.cjs","sources":["../../src/devtoolsPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onScopeDispose, ref, watchEffect } from 'vue'\nimport { onlineManager, useQueryClient } from '@tanstack/vue-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { StyleValue } from 'vue'\nimport type { DevtoolsPanelOptions } from './types'\n\nconst props = defineProps<DevtoolsPanelOptions>()\nconst style = computed<StyleValue>(() => {\n  return {\n    height: '500px',\n    ...props.style,\n  }\n})\n\nconst div = ref<HTMLElement>()\nconst client = props.client || useQueryClient()\nconst devtools = new TanstackQueryDevtoolsPanel({\n  client,\n  queryFlavor: 'Vue Query',\n  version: '5',\n  onlineManager,\n  buttonPosition: 'bottom-left',\n  position: 'bottom',\n  initialIsOpen: true,\n  errorTypes: props.errorTypes,\n  styleNonce: props.styleNonce,\n  shadowDOMTarget: props.shadowDOMTarget,\n  hideDisabledQueries: props.hideDisabledQueries,\n  onClose: props.onClose,\n})\n\nwatchEffect(() => {\n  devtools.setOnClose(props.onClose ?? (() => {}))\n  devtools.setErrorTypes(props.errorTypes || [])\n})\n\nonMounted(() => {\n  devtools.mount(div.value as HTMLElement)\n})\n\nonScopeDispose(() => {\n  devtools.unmount()\n})\n</script>\n\n<template>\n  <div :style=\"style\" className=\"tsqd-parent-container\" ref=\"div\"></div>\n</template>\n"],"names":["computed","ref","useQueryClient","TanstackQueryDevtoolsPanel","onlineManager","watchEffect","onMounted","onScopeDispose"],"mappings":";;;;;;;;;;;;;;;;AAOA,UAAM,QAAQ;AACR,UAAA,QAAQA,IAAAA,SAAqB,MAAM;AAChC,aAAA;AAAA,QACL,QAAQ;AAAA,QACR,GAAG,MAAM;AAAA,MACX;AAAA,IAAA,CACD;AAED,UAAM,MAAMC,IAAAA,IAAiB;AACvB,UAAA,SAAS,MAAM,UAAUC,wBAAe;AACxC,UAAA,WAAW,IAAIC,yCAA2B;AAAA,MAC9C;AAAA,MACA,aAAa;AAAA,MACb,SAAS;AAAA,MAAA,eACTC,SAAA;AAAA,MACA,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,eAAe;AAAA,MACf,YAAY,MAAM;AAAA,MAClB,YAAY,MAAM;AAAA,MAClB,iBAAiB,MAAM;AAAA,MACvB,qBAAqB,MAAM;AAAA,MAC3B,SAAS,MAAM;AAAA,IAAA,CAChB;AAEDC,QAAAA,YAAY,MAAM;AACP,eAAA,WAAW,MAAM,YAAY,MAAM;AAAA,MAAA,EAAG;AAC/C,eAAS,cAAc,MAAM,cAAc,CAAA,CAAE;AAAA,IAAA,CAC9C;AAEDC,QAAAA,UAAU,MAAM;AACL,eAAA,MAAM,IAAI,KAAoB;AAAA,IAAA,CACxC;AAEDC,QAAAA,eAAe,MAAM;AACnB,eAAS,QAAQ;AAAA,IAAA,CAClB;;;;;;;;;;;;"}

package/dist/cjs/devtoolsPanel.vue.d.cts

@@ -0,0 +1,12 @@
+import { DevtoolsPanelOptions } from './types.cjs';
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToOption<DevtoolsPanelOptions>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<DevtoolsPanelOptions>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/cjs/devtoolsPanel.vue2.cjs

@@ -0,0 +1,4 @@
+"use strict";
+const devtoolsPanel_vue_vue_type_script_setup_true_lang = require("./devtoolsPanel.vue.cjs");
+module.exports = devtoolsPanel_vue_vue_type_script_setup_true_lang;
+//# sourceMappingURL=devtoolsPanel.vue2.cjs.map

package/dist/cjs/devtoolsPanel.vue2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtoolsPanel.vue2.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/cjs/index.cjs

@@ -1,8 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const devtools_vue_vue_type_script_setup_true_lang = require("./devtools.vue.cjs");
+const devtoolsPanel_vue_vue_type_script_setup_true_lang = require("./devtoolsPanel.vue.cjs");
 const VueQueryDevtools = process.env.NODE_ENV !== "development" ? function() {
   return null;
 } : devtools_vue_vue_type_script_setup_true_lang;
+const VueQueryDevtoolsPanel = process.env.NODE_ENV !== "development" ? function() {
+  return null;
+} : devtoolsPanel_vue_vue_type_script_setup_true_lang;
 exports.VueQueryDevtools = VueQueryDevtools;
+exports.VueQueryDevtoolsPanel = VueQueryDevtoolsPanel;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/index.ts"],"sourcesContent":["import devtools from './devtools.vue'\nimport type { DefineComponent } from 'vue'\nimport type { DevtoolsOptions } from './types'\n\nexport const VueQueryDevtools = (\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : devtools\n) as DefineComponent<DevtoolsOptions, {}, unknown>\n"],"names":["devtools"],"mappings":";;;AAIO,MAAM,mBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACH,SAAA;AACT,IACAA;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/index.ts"],"sourcesContent":["import devtools from './devtools.vue'\nimport devtoolsPanel from './devtoolsPanel.vue'\nimport type { DefineComponent } from 'vue'\nimport type { DevtoolsOptions, DevtoolsPanelOptions } from './types'\n\nexport const VueQueryDevtools = (\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : devtools\n) as DefineComponent<DevtoolsOptions, {}, unknown>\n\nexport const VueQueryDevtoolsPanel = (\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : devtoolsPanel\n) as DefineComponent<DevtoolsPanelOptions, {}, unknown>\n"],"names":["devtools","devtoolsPanel"],"mappings":";;;;AAKO,MAAM,mBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACH,SAAA;AACT,IACAA;AAGC,MAAM,wBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACH,SAAA;AACT,IACAC;;;"}

package/dist/cjs/index.d.cts

@@ -1,3 +1,4 @@
 import { DefineComponent } from 'vue';
-import { DevtoolsOptions } from './types.cjs';
+import { DevtoolsOptions, DevtoolsPanelOptions } from './types.cjs';
 export declare const VueQueryDevtools: DefineComponent<DevtoolsOptions, {}, unknown>;
+export declare const VueQueryDevtoolsPanel: DefineComponent<DevtoolsPanelOptions, {}, unknown>;

package/dist/cjs/types.d.cts

@@ -38,3 +38,36 @@ export interface DevtoolsOptions {
      */
     hideDisabledQueries?: boolean;
 }
+export interface DevtoolsPanelOptions {
+    /**
+     * Custom instance of QueryClient
+     */
+    client?: QueryClient;
+    /**
+     * Use this so you can define custom errors that can be shown in the devtools.
+     */
+    errorTypes?: Array<DevtoolsErrorType>;
+    /**
+     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+     */
+    styleNonce?: string;
+    /**
+     * Use this so you can attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+    /**
+     * Custom styles for the devtools panel
+     * @default { height: '500px' }
+     * @example { height: '100%' }
+     * @example { height: '100%', width: '100%' }
+     */
+    style?: React.CSSProperties;
+    /**
+     * Callback function that is called when the devtools panel is closed
+     */
+    onClose?: () => unknown;
+    /**
+     * Set this to true to hide disabled queries from the devtools panel.
+     */
+    hideDisabledQueries?: boolean;
+}

package/dist/esm/devtoolsPanel.vue.d.ts

@@ -0,0 +1,12 @@
+import { DevtoolsPanelOptions } from './types.js';
+declare const _default: import('vue').DefineComponent<__VLS_TypePropsToOption<DevtoolsPanelOptions>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToOption<DevtoolsPanelOptions>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/esm/devtoolsPanel.vue.js

@@ -0,0 +1,63 @@
+import { defineComponent, computed, ref, watchEffect, onMounted, onScopeDispose, createElementBlock, openBlock, normalizeStyle } from "vue";
+import { useQueryClient, onlineManager } from "@tanstack/vue-query";
+import { TanstackQueryDevtoolsPanel } from "@tanstack/query-devtools";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "devtoolsPanel",
+  props: {
+    client: {},
+    errorTypes: {},
+    styleNonce: {},
+    shadowDOMTarget: {},
+    style: {},
+    onClose: { type: Function },
+    hideDisabledQueries: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const style = computed(() => {
+      return {
+        height: "500px",
+        ...props.style
+      };
+    });
+    const div = ref();
+    const client = props.client || useQueryClient();
+    const devtools = new TanstackQueryDevtoolsPanel({
+      client,
+      queryFlavor: "Vue Query",
+      version: "5",
+      onlineManager,
+      buttonPosition: "bottom-left",
+      position: "bottom",
+      initialIsOpen: true,
+      errorTypes: props.errorTypes,
+      styleNonce: props.styleNonce,
+      shadowDOMTarget: props.shadowDOMTarget,
+      hideDisabledQueries: props.hideDisabledQueries,
+      onClose: props.onClose
+    });
+    watchEffect(() => {
+      devtools.setOnClose(props.onClose ?? (() => {
+      }));
+      devtools.setErrorTypes(props.errorTypes || []);
+    });
+    onMounted(() => {
+      devtools.mount(div.value);
+    });
+    onScopeDispose(() => {
+      devtools.unmount();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle(style.value),
+        className: "tsqd-parent-container",
+        ref_key: "div",
+        ref: div
+      }, null, 4);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=devtoolsPanel.vue.js.map

package/dist/esm/devtoolsPanel.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtoolsPanel.vue.js","sources":["../../src/devtoolsPanel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onScopeDispose, ref, watchEffect } from 'vue'\nimport { onlineManager, useQueryClient } from '@tanstack/vue-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { StyleValue } from 'vue'\nimport type { DevtoolsPanelOptions } from './types'\n\nconst props = defineProps<DevtoolsPanelOptions>()\nconst style = computed<StyleValue>(() => {\n  return {\n    height: '500px',\n    ...props.style,\n  }\n})\n\nconst div = ref<HTMLElement>()\nconst client = props.client || useQueryClient()\nconst devtools = new TanstackQueryDevtoolsPanel({\n  client,\n  queryFlavor: 'Vue Query',\n  version: '5',\n  onlineManager,\n  buttonPosition: 'bottom-left',\n  position: 'bottom',\n  initialIsOpen: true,\n  errorTypes: props.errorTypes,\n  styleNonce: props.styleNonce,\n  shadowDOMTarget: props.shadowDOMTarget,\n  hideDisabledQueries: props.hideDisabledQueries,\n  onClose: props.onClose,\n})\n\nwatchEffect(() => {\n  devtools.setOnClose(props.onClose ?? (() => {}))\n  devtools.setErrorTypes(props.errorTypes || [])\n})\n\nonMounted(() => {\n  devtools.mount(div.value as HTMLElement)\n})\n\nonScopeDispose(() => {\n  devtools.unmount()\n})\n</script>\n\n<template>\n  <div :style=\"style\" className=\"tsqd-parent-container\" ref=\"div\"></div>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAOA,UAAM,QAAQ;AACR,UAAA,QAAQ,SAAqB,MAAM;AAChC,aAAA;AAAA,QACL,QAAQ;AAAA,QACR,GAAG,MAAM;AAAA,MACX;AAAA,IAAA,CACD;AAED,UAAM,MAAM,IAAiB;AACvB,UAAA,SAAS,MAAM,UAAU,eAAe;AACxC,UAAA,WAAW,IAAI,2BAA2B;AAAA,MAC9C;AAAA,MACA,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,eAAe;AAAA,MACf,YAAY,MAAM;AAAA,MAClB,YAAY,MAAM;AAAA,MAClB,iBAAiB,MAAM;AAAA,MACvB,qBAAqB,MAAM;AAAA,MAC3B,SAAS,MAAM;AAAA,IAAA,CAChB;AAED,gBAAY,MAAM;AACP,eAAA,WAAW,MAAM,YAAY,MAAM;AAAA,MAAA,EAAG;AAC/C,eAAS,cAAc,MAAM,cAAc,CAAA,CAAE;AAAA,IAAA,CAC9C;AAED,cAAU,MAAM;AACL,eAAA,MAAM,IAAI,KAAoB;AAAA,IAAA,CACxC;AAED,mBAAe,MAAM;AACnB,eAAS,QAAQ;AAAA,IAAA,CAClB;;;;;;;;;;;"}

package/dist/esm/devtoolsPanel.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./devtoolsPanel.vue.js";
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=devtoolsPanel.vue2.js.map

package/dist/esm/devtoolsPanel.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtoolsPanel.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/esm/index.d.ts

@@ -1,3 +1,4 @@
 import { DefineComponent } from 'vue';
-import { DevtoolsOptions } from './types.js';
+import { DevtoolsOptions, DevtoolsPanelOptions } from './types.js';
 export declare const VueQueryDevtools: DefineComponent<DevtoolsOptions, {}, unknown>;
+export declare const VueQueryDevtoolsPanel: DefineComponent<DevtoolsPanelOptions, {}, unknown>;

package/dist/esm/index.js

@@ -1,8 +1,13 @@
 import _sfc_main from "./devtools.vue.js";
+import _sfc_main$1 from "./devtoolsPanel.vue.js";
 const VueQueryDevtools = process.env.NODE_ENV !== "development" ? function() {
   return null;
 } : _sfc_main;
+const VueQueryDevtoolsPanel = process.env.NODE_ENV !== "development" ? function() {
+  return null;
+} : _sfc_main$1;
 export {
-  VueQueryDevtools
+  VueQueryDevtools,
+  VueQueryDevtoolsPanel
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["import devtools from './devtools.vue'\nimport type { DefineComponent } from 'vue'\nimport type { DevtoolsOptions } from './types'\n\nexport const VueQueryDevtools = (\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : devtools\n) as DefineComponent<DevtoolsOptions, {}, unknown>\n"],"names":["devtools"],"mappings":";AAIO,MAAM,mBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACH,SAAA;AACT,IACAA;"}
+{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["import devtools from './devtools.vue'\nimport devtoolsPanel from './devtoolsPanel.vue'\nimport type { DefineComponent } from 'vue'\nimport type { DevtoolsOptions, DevtoolsPanelOptions } from './types'\n\nexport const VueQueryDevtools = (\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : devtools\n) as DefineComponent<DevtoolsOptions, {}, unknown>\n\nexport const VueQueryDevtoolsPanel = (\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : devtoolsPanel\n) as DefineComponent<DevtoolsPanelOptions, {}, unknown>\n"],"names":["devtools","devtoolsPanel"],"mappings":";;AAKO,MAAM,mBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACH,SAAA;AACT,IACAA;AAGC,MAAM,wBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACH,SAAA;AACT,IACAC;"}

package/dist/esm/types.d.ts

@@ -38,3 +38,36 @@ export interface DevtoolsOptions {
      */
     hideDisabledQueries?: boolean;
 }
+export interface DevtoolsPanelOptions {
+    /**
+     * Custom instance of QueryClient
+     */
+    client?: QueryClient;
+    /**
+     * Use this so you can define custom errors that can be shown in the devtools.
+     */
+    errorTypes?: Array<DevtoolsErrorType>;
+    /**
+     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+     */
+    styleNonce?: string;
+    /**
+     * Use this so you can attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+    /**
+     * Custom styles for the devtools panel
+     * @default { height: '500px' }
+     * @example { height: '100%' }
+     * @example { height: '100%', width: '100%' }
+     */
+    style?: React.CSSProperties;
+    /**
+     * Callback function that is called when the devtools panel is closed
+     */
+    onClose?: () => unknown;
+    /**
+     * Set this to true to hide disabled queries from the devtools panel.
+     */
+    hideDisabledQueries?: boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/vue-query-devtools",
-  "version": "5.90.2",
+  "version": "6.0.0",
   "description": "Developer tools to interact with and visualize the TanStack/vue-query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -46,16 +46,16 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.4",
-    "eslint-plugin-vue": "^9.27.0",
+    "eslint-plugin-vue": "^10.5.0",
     "typescript": "5.8.3",
     "vite": "^6.3.6",
     "vue": "^3.4.27",
     "vue-tsc": "^2.2.8",
-    "@tanstack/vue-query": "5.90.2"
+    "@tanstack/vue-query": "5.91.0"
   },
   "peerDependencies": {
     "vue": "^3.3.0",
-    "@tanstack/vue-query": "^5.90.2"
+    "@tanstack/vue-query": "^5.91.0"
   },
   "scripts": {
     "clean": "premove ./build ./coverage ./dist-ts",

package/src/devtoolsPanel.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed, onMounted, onScopeDispose, ref, watchEffect } from 'vue'
+import { onlineManager, useQueryClient } from '@tanstack/vue-query'
+import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
+import type { StyleValue } from 'vue'
+import type { DevtoolsPanelOptions } from './types'
+
+const props = defineProps<DevtoolsPanelOptions>()
+const style = computed<StyleValue>(() => {
+  return {
+    height: '500px',
+    ...props.style,
+  }
+})
+
+const div = ref<HTMLElement>()
+const client = props.client || useQueryClient()
+const devtools = new TanstackQueryDevtoolsPanel({
+  client,
+  queryFlavor: 'Vue Query',
+  version: '5',
+  onlineManager,
+  buttonPosition: 'bottom-left',
+  position: 'bottom',
+  initialIsOpen: true,
+  errorTypes: props.errorTypes,
+  styleNonce: props.styleNonce,
+  shadowDOMTarget: props.shadowDOMTarget,
+  hideDisabledQueries: props.hideDisabledQueries,
+  onClose: props.onClose,
+})
+
+watchEffect(() => {
+  devtools.setOnClose(props.onClose ?? (() => {}))
+  devtools.setErrorTypes(props.errorTypes || [])
+})
+
+onMounted(() => {
+  devtools.mount(div.value as HTMLElement)
+})
+
+onScopeDispose(() => {
+  devtools.unmount()
+})
+</script>
+
+<template>
+  <div :style="style" className="tsqd-parent-container" ref="div"></div>
+</template>

package/src/index.ts

@@ -1,6 +1,7 @@
 import devtools from './devtools.vue'
+import devtoolsPanel from './devtoolsPanel.vue'
 import type { DefineComponent } from 'vue'
-import type { DevtoolsOptions } from './types'
+import type { DevtoolsOptions, DevtoolsPanelOptions } from './types'
 
 export const VueQueryDevtools = (
   process.env.NODE_ENV !== 'development'
@@ -9,3 +10,11 @@ export const VueQueryDevtools = (
       }
     : devtools
 ) as DefineComponent<DevtoolsOptions, {}, unknown>
+
+export const VueQueryDevtoolsPanel = (
+  process.env.NODE_ENV !== 'development'
+    ? function () {
+        return null
+      }
+    : devtoolsPanel
+) as DefineComponent<DevtoolsPanelOptions, {}, unknown>

package/src/types.ts

@@ -43,3 +43,39 @@ export interface DevtoolsOptions {
    */
   hideDisabledQueries?: boolean
 }
+
+export interface DevtoolsPanelOptions {
+  /**
+   * Custom instance of QueryClient
+   */
+  client?: QueryClient
+  /**
+   * Use this so you can define custom errors that can be shown in the devtools.
+   */
+  errorTypes?: Array<DevtoolsErrorType>
+  /**
+   * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+   */
+  styleNonce?: string
+  /**
+   * Use this so you can attach the devtool's styles to specific element in the DOM.
+   */
+  shadowDOMTarget?: ShadowRoot
+
+  /**
+   * Custom styles for the devtools panel
+   * @default { height: '500px' }
+   * @example { height: '100%' }
+   * @example { height: '100%', width: '100%' }
+   */
+  style?: React.CSSProperties
+
+  /**
+   * Callback function that is called when the devtools panel is closed
+   */
+  onClose?: () => unknown
+  /**
+   * Set this to true to hide disabled queries from the devtools panel.
+   */
+  hideDisabledQueries?: boolean
+}