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

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-actions bot added documentation Improvements or additions to documentation package: vue-query-devtools labels Oct 21, 2025

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

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

github-actions bot mentioned this pull request Oct 21, 2025

ci: Version Packages #9791

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

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

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

DamianOsipiuk commented Oct 21, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

changeset-bot bot commented Oct 21, 2025

Uh oh!

nx-cloud bot commented Oct 21, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Oct 21, 2025 •

edited

Loading

Review failed

Uh oh!

pkg-pr-new bot commented Oct 21, 2025

Uh oh!

github-actions bot commented Oct 21, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

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

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

Conversation

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

Uh oh!

🎯 Changes

✅ Checklist

🚀 Release Impact

Summary by CodeRabbit

Uh oh!

changeset-bot bot commented Oct 21, 2025

🦋 Changeset detected

Uh oh!

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

Uh oh!

Uh oh!

coderabbitai bot 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-new bot commented Oct 21, 2025

Uh oh!

github-actions bot 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-cloud bot commented Oct 21, 2025 •

edited

Loading

coderabbitai bot commented Oct 21, 2025 •

edited

Loading