From 3f4b2a7450d7f236a0dd1fa8f27939320a12c888 Mon Sep 17 00:00:00 2001 From: Damian Osipiuk Date: Mon, 20 Oct 2025 17:08:57 +0200 Subject: [PATCH] feat(vue-query-devtools): Embedded panel mode --- .changeset/mighty-actors-lose.md | 5 ++ docs/framework/vue/devtools.md | 43 ++++++++++++++++ .../vue-query-devtools/src/devtoolsPanel.vue | 49 +++++++++++++++++++ packages/vue-query-devtools/src/index.ts | 11 ++++- packages/vue-query-devtools/src/types.ts | 36 ++++++++++++++ 5 files changed, 143 insertions(+), 1 deletion(-) create mode 100644 .changeset/mighty-actors-lose.md create mode 100644 packages/vue-query-devtools/src/devtoolsPanel.vue diff --git a/.changeset/mighty-actors-lose.md b/.changeset/mighty-actors-lose.md new file mode 100644 index 0000000000..27402c7abd --- /dev/null +++ b/.changeset/mighty-actors-lose.md @@ -0,0 +1,5 @@ +--- +'@tanstack/vue-query-devtools': minor +--- + +feat(vue-query-devtools): Add embedded panel mode diff --git a/docs/framework/vue/devtools.md b/docs/framework/vue/devtools.md index 98d417251e..666058e27a 100644 --- a/docs/framework/vue/devtools.md +++ b/docs/framework/vue/devtools.md @@ -44,6 +44,8 @@ bun add @tanstack/vue-query-devtools By default, Vue Query Devtools are only included in bundles when `process.env.NODE_ENV === 'development'`, so you don't need to worry about excluding them during a production build. +## Floating Mode + Devtools will be mounted as a fixed, floating element in your app and provide a toggle in the corner of the screen to show and hide the devtools. This toggle state will be stored and remembered in localStorage across reloads. Place the following code as high in your Vue app as you can. The closer it is to the root of the page, the better it will work! @@ -79,6 +81,47 @@ import { VueQueryDevtools } from '@tanstack/vue-query-devtools' - Default behavior will apply the devtool's styles to the head tag within the DOM. - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM. +## Embedded Mode + +Embedded mode will show the development tools as a fixed element in your application, so you can use our panel in your own development tools. + +Place the following code as high in your React app as you can. The closer it is to the root of the page, the better it will work! + +```vue + + + +``` + +### Options + +- `style?: React.CSSProperties` + - Custom styles for the devtools panel + - Default: `{ height: '500px' }` + - Example: `{ height: '100%' }` + - Example: `{ height: '100%', width: '100%' }` +- `onClose?: () => unknown` + - Callback function that is called when the devtools panel is closed +- `client?: QueryClient`, + - Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used. +- `errorTypes?: { name: string; initializer: (query: Query) => TError}[]` + - Use this to predefine some errors that can be triggered on your queries. Initializer will be called (with the specific query) when that error is toggled on from the UI. It must return an Error. +- `styleNonce?: string` + - 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. +- `shadowDOMTarget?: ShadowRoot` + - Default behavior will apply the devtool's styles to the head tag within the DOM. + - Use this to pass a shadow DOM target to the devtools so that the styles will be applied within the shadow DOM instead of within the head tag in the light DOM. + ## Traditional Devtools Vue Query will seamlessly integrate with the [Official Vue devtools](https://github.com/vuejs/devtools-next), adding custom inspector and timeline events. diff --git a/packages/vue-query-devtools/src/devtoolsPanel.vue b/packages/vue-query-devtools/src/devtoolsPanel.vue new file mode 100644 index 0000000000..189f86330b --- /dev/null +++ b/packages/vue-query-devtools/src/devtoolsPanel.vue @@ -0,0 +1,49 @@ + + + diff --git a/packages/vue-query-devtools/src/index.ts b/packages/vue-query-devtools/src/index.ts index 39c4912e86..9033a34752 100644 --- a/packages/vue-query-devtools/src/index.ts +++ b/packages/vue-query-devtools/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 + +export const VueQueryDevtoolsPanel = ( + process.env.NODE_ENV !== 'development' + ? function () { + return null + } + : devtoolsPanel +) as DefineComponent diff --git a/packages/vue-query-devtools/src/types.ts b/packages/vue-query-devtools/src/types.ts index c15e000e95..8007b06504 100644 --- a/packages/vue-query-devtools/src/types.ts +++ b/packages/vue-query-devtools/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 + /** + * 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 +}