feat(vue-query-devtools): Embedded panel mode by DamianOsipiuk · Pull Request #9790 · TanStack/query

DamianOsipiuk · 2025-10-21T12:58:21Z

🎯 Changes

✅ Checklist

I have followed the steps in the Contributing guide.
I have tested this code locally with pnpm run test:pr.

🚀 Release Impact

This change affects published code, and I have generated a changeset.
This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

New Features
- Embedded panel mode for Vue Query Devtools, providing an alternative layout option alongside Floating Mode.
- New configuration options for customizing panel behavior and styling.
Documentation
- Added comprehensive documentation for Floating Mode and Embedded Mode with setup examples and available configuration options.

changeset-bot · 2025-10-21T12:58:25Z

🦋 Changeset detected

Latest commit: 3f4b2a7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@tanstack/vue-query-devtools	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

nx-cloud · 2025-10-21T12:58:59Z

View your CI Pipeline Execution ↗ for commit 3f4b2a7

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	57s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	14s	View ↗

☁️ Nx Cloud last updated this comment at 2025-10-21 13:00:27 UTC

coderabbitai · 2025-10-21T12:59:42Z

Caution

Review failed

The pull request is closed.

Walkthrough

This PR introduces embedded panel mode for Vue Query Devtools by adding a new VueQueryDevtoolsPanel component, configuration options, documentation, and a changeset entry documenting the minor version bump and feature addition.

Changes

Cohort / File(s)	Summary
Changeset `.changeset/mighty-actors-lose.md`	Documents minor version bump for `@tanstack/vue-query-devtools` and the new embedded panel mode feature.
Type Definitions `packages/vue-query-devtools/src/types.ts`	Adds new `DevtoolsPanelOptions` interface with properties: `client`, `errorTypes`, `styleNonce`, `shadowDOMTarget`, `style`, `onClose`, and `hideDisabledQueries`.
Core Implementation `packages/vue-query-devtools/src/devtoolsPanel.vue`	Introduces new Vue SFC component rendering TanStack Query DevTools panel, handling props-based client resolution, reactive error type/onClose updates, and DOM mounting/unmounting lifecycle.
Public Exports `packages/vue-query-devtools/src/index.ts`	Exports new `VueQueryDevtoolsPanel` component with conditional resolution based on development environment.
Documentation `docs/framework/vue/devtools.md`	Adds comprehensive documentation for Floating Mode and new Embedded Mode, including configuration options, code examples, and `VueQueryDevtoolsPanel` usage patterns.

Sequence Diagram(s)

sequenceDiagram
participant Vue as Vue App
participant Panel as VueQueryDevtoolsPanel
participant Client as QueryClient
participant Mount as DOM Container
Vue->>Panel: mount with props (client?, errorTypes, style, onClose)
alt client prop provided
Panel->>Client: use props.client
else
Panel->>Panel: useQueryClient()
end
Panel->>Panel: compute containerStyle
Panel->>Panel: setErrorTypes(props.errorTypes)
Panel->>Panel: setOnClose(props.onClose)
Panel->>Mount: onMounted - render devtools panel
Mount->>Mount: append to DOM
Note over Panel: Component lifecycle active
Vue->>Panel: component unmount
Panel->>Mount: onScopeDispose - cleanup

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

The changes involve new logic across multiple files (component, types, exports, and documentation) with moderate complexity. The component implementation handles client resolution, lifecycle management, and reactive property updates. While individual pieces are straightforward, the integration across multiple modules and verification of proper devtools initialization require careful review.

Possibly related PRs

fix: solid-query-devtools and panel query client #9763: Modifies framework-specific devtools panel implementations to accept and forward a client prop into the hook that resolves the QueryClient, ensuring panels use explicit client prop rather than only relying on global context.

Suggested reviewers

TkDodo

Poem

🐰 A panel embedded, in Vue's graceful fold,
No floating this time, a container so bold,
Query Devtools nestled, where developers gaze,
Debugging queries through configuration's maze! ✨

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch do/vue-add-devtools-panel

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ecdf962 and 3f4b2a7.

📒 Files selected for processing (5)

.changeset/mighty-actors-lose.md (1 hunks)
docs/framework/vue/devtools.md (2 hunks)
packages/vue-query-devtools/src/devtoolsPanel.vue (1 hunks)
packages/vue-query-devtools/src/index.ts (2 hunks)
packages/vue-query-devtools/src/types.ts (1 hunks)

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2025-10-21T13:00:09Z

More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@9790

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@9790

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@9790

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@9790

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@9790

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@9790

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@9790

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@9790

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@9790

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@9790

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@9790

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@9790

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@9790

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@9790

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@9790

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@9790

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@9790

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@9790

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@9790

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@9790

commit: 3f4b2a7

github-actions · 2025-10-21T13:00:10Z

Sizes for commit 3f4b2a7:

Branch	Bundle Size
Main
This PR

feat(vue-query-devtools): Embedded panel mode
3f4b2a7

github-actionsBot added documentation Improvements or additions to documentation package: vue-query-devtools labels Oct 21, 2025

DamianOsipiuk merged commit ec4214a into mainOct 21, 2025
6 of 7 checks passed

DamianOsipiuk deleted the do/vue-add-devtools-panel branch October 21, 2025 13:01

github-actionsBot mentioned this pull request Oct 21, 2025
ci: Version Packages #9791
Merged

coderabbitaiBot mentioned this pull request Nov 19, 2025
feat(devtools): allow passing a theme via prop #9887
Merged
4 tasks

coderabbitaiBot mentioned this pull request Feb 23, 2026
Add preact query devtools #10119
Merged
2 tasks

Navigation Menu

Uh oh!

Uh oh!

feat(vue-query-devtools): Embedded panel mode - #9790

feat(vue-query-devtools): Embedded panel mode#9790
DamianOsipiuk merged 1 commit into
mainfrom
do/vue-add-devtools-panel

DamianOsipiuk commented Oct 21, 2025•
edited by coderabbitai Bot
Loading

Uh oh!

changeset-botBot commented Oct 21, 2025

Uh oh!

nx-cloudBot commented Oct 21, 2025•
edited
Loading

Uh oh!

coderabbitaiBot commented Oct 21, 2025•
edited
Loading

Review failed

Uh oh!

pkg-pr-newBot commented Oct 21, 2025

Uh oh!

github-actionsBot commented Oct 21, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Uh oh!

Conversation

DamianOsipiuk commented Oct 21, 2025• edited by coderabbitai BotLoading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

✅ Checklist

🚀 Release Impact

Summary by CodeRabbit

Uh oh!

changeset-botBot commented Oct 21, 2025

🦋 Changeset detected

Uh oh!

nx-cloudBot commented Oct 21, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitaiBot commented Oct 21, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Uh oh!

pkg-pr-newBot commented Oct 21, 2025

Uh oh!

github-actionsBot commented Oct 21, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

DamianOsipiuk commented Oct 21, 2025•
edited by coderabbitai Bot
Loading

nx-cloudBot commented Oct 21, 2025•
edited
Loading

coderabbitaiBot commented Oct 21, 2025•
edited
Loading