fix(vue-query-devtools): use class attribute in templates by grzdev · Pull Request #10635 · TanStack/query

grzdev · 2026-05-05T02:32:37Z

🎯 Changes

Use the Vue class attribute in Vue devtools template containers.

The Vue devtools components were using the React/JSX-style className attribute in .vue templates. This updates them to use class instead.

✅ 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

Bug Fixes
- Fixed CSS styling application in Vue Query DevTools. Corrected the devtools container template to properly render with intended visual styling. This patch release resolves a template attribute issue that was preventing proper CSS class application to the devtools interface elements.

nx-cloud · 2026-05-05T02:33:04Z

View your CI Pipeline Execution ↗ for commit cbd2f10

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

☁️ Nx Cloud last updated this comment at 2026-05-05 02:34:34 UTC

pkg-pr-new · 2026-05-05T02:34:20Z

More templates

@tanstack/angular-query-experimental

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

@tanstack/eslint-plugin-query

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

@tanstack/preact-query

npm i https://pkg.pr.new/@tanstack/preact-query@10635

@tanstack/preact-query-devtools

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

@tanstack/preact-query-persist-client

npm i https://pkg.pr.new/@tanstack/preact-query-persist-client@10635

@tanstack/query-async-storage-persister

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

@tanstack/query-broadcast-client-experimental

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

@tanstack/query-core

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

@tanstack/query-devtools

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

@tanstack/query-persist-client-core

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

@tanstack/query-sync-storage-persister

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

@tanstack/react-query

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

@tanstack/react-query-devtools

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

@tanstack/react-query-next-experimental

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

@tanstack/react-query-persist-client

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

@tanstack/solid-query

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

@tanstack/solid-query-devtools

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

@tanstack/solid-query-persist-client

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

@tanstack/svelte-query

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

@tanstack/svelte-query-devtools

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

@tanstack/svelte-query-persist-client

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

@tanstack/vue-query

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

@tanstack/vue-query-devtools

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

commit: cbd2f10

coderabbitai · 2026-05-05T02:47:38Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ceac656d-c40a-4507-b618-7aa3c3636f7b

📥 Commits

Reviewing files that changed from the base of the PR and between c8e1bde and cbd2f10.

📒 Files selected for processing (3)

.changeset/vue-devtools-class-attribute.md
packages/vue-query-devtools/src/devtools.vue
packages/vue-query-devtools/src/devtoolsPanel.vue

📝 Walkthrough

Walkthrough

This PR corrects Vue template syntax in the devtools package by replacing the JSX-style className attribute with Vue's standard class attribute in two Vue Single File Components, and documents the change in a Changesets entry.

Changes

Vue Template Syntax Correction

Layer / File(s)	Summary
Template Syntax Fix `packages/vue-query-devtools/src/devtools.vue`, `packages/vue-query-devtools/src/devtoolsPanel.vue`	Changes `className="tsqd-parent-container"` to `class="tsqd-parent-container"` in the root container divs of both components to use proper Vue template binding syntax.
Release Documentation `.changeset/vue-devtools-class-attribute.md`	Adds a Changesets entry documenting a `patch` release for `@tanstack/vue-query-devtools` with the class attribute fix.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 A template was broken, className astray,
JSX crept in where Vue should hold sway,
We changed it to class, now binding is right,
The devtools container glows pure and bright! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: fixing Vue devtools to use the correct `class` attribute instead of `className` in templates.
Description check	✅ Passed	The description includes all required sections from the template with relevant details, though the testing checkbox is unchecked indicating local tests were not run.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

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.}

fix(vue-query-devtools): use class attribute in templates

cbd2f10

github-actions Bot added the package: vue-query-devtools label May 5, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(vue-query-devtools): use class attribute in templates#10635

fix(vue-query-devtools): use class attribute in templates#10635
grzdev wants to merge 1 commit intoTanStack:mainfrom
grzdev:fix/vue-devtools-class-attribute

grzdev commented May 5, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

nx-cloud Bot commented May 5, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented May 5, 2026

Uh oh!

coderabbitai Bot commented May 5, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

grzdev commented May 5, 2026 • 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!

nx-cloud Bot commented May 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new Bot commented May 5, 2026

Uh oh!

coderabbitai Bot commented May 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

grzdev commented May 5, 2026 •

edited by coderabbitai Bot

Loading

nx-cloud Bot commented May 5, 2026 •

edited

Loading

coderabbitai Bot commented May 5, 2026 •

edited

Loading