fix: vue devtools class attribute

[grzdev]

🎯 Changes

Use the Vue class attribute instead of React-style className in Vue devtools template containers.

The devtools.vue and devtoolsPanel.vue components were using className in their <template> blocks, which is a React-ism. Vue templates should use class for CSS class binding.

✅ 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 Vue DevTools components to use correct Vue template syntax for styling attributes, ensuring proper styling rendering across the DevTools interface.

[coderabbitai]

📝 Walkthrough

Walkthrough

Two Vue devtools component templates and their release changelog are updated: devtools.vue and devtoolsPanel.vue switch their container element attributes from className to Vue's standard class, with a patch-level Changesets entry documenting the fix.

Changes

Vue devtools className to class correction

Layer / File(s)	Summary
Template attribute fixes and changelog .changeset/fix-vue-devtools-class-attribute.md, packages/vue-query-devtools/src/devtools.vue, packages/vue-query-devtools/src/devtoolsPanel.vue	Both Vue devtools templates replace className with class on their container elements, preserving styling and refs. A Changesets entry documents the patch version bump and fix.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• TanStack/query#10635: Similar Vue devtools template attribute corrections from className to class in the same components with matching changeset updates.

Suggested labels

package: vue-query-devtools

Suggested reviewers

• DamianOsipiuk

Poem

🐰 A template fix, so clean and bright,
className → class, now Vue's just right!
Two devtools dance in harmony,
Attributes aligned, as they should be! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description fully matches the template structure with detailed changes explanation and all checklist items properly checked.
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.
Title check	✅ Passed	The pull request title 'fix: vue devtools class attribute' clearly and accurately summarizes the main change: replacing React-style className with Vue's class attribute in Vue devtools components.

_{✏️ 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

• X
• Mastodon
• Reddit
• LinkedIn

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