From cbd2f10991096eef02b687964a6942175f7eaf8a Mon Sep 17 00:00:00 2001
From: grzdev <damilolaoyeniyi13@gmail.com>
Date: Tue, 5 May 2026 03:32:01 +0100
Subject: [PATCH] fix(vue-query-devtools): use class attribute in templates

---
 .changeset/vue-devtools-class-attribute.md        | 5 +++++
 packages/vue-query-devtools/src/devtools.vue      | 2 +-
 packages/vue-query-devtools/src/devtoolsPanel.vue | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/vue-devtools-class-attribute.md

diff --git a/.changeset/vue-devtools-class-attribute.md b/.changeset/vue-devtools-class-attribute.md
new file mode 100644
index 00000000000..1435da6a0df
--- /dev/null
+++ b/.changeset/vue-devtools-class-attribute.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/vue-query-devtools': patch
+---
+
+Use the Vue `class` attribute for devtools template containers.
diff --git a/packages/vue-query-devtools/src/devtools.vue b/packages/vue-query-devtools/src/devtools.vue
index 5a160482819..a46b7adbac0 100644
--- a/packages/vue-query-devtools/src/devtools.vue
+++ b/packages/vue-query-devtools/src/devtools.vue
@@ -40,5 +40,5 @@ onMounted(() => {
 </script>
 
 <template>
-  <div className="tsqd-parent-container" ref="div"></div>
+  <div class="tsqd-parent-container" ref="div"></div>
 </template>
diff --git a/packages/vue-query-devtools/src/devtoolsPanel.vue b/packages/vue-query-devtools/src/devtoolsPanel.vue
index 605a632240c..80884daa6ec 100644
--- a/packages/vue-query-devtools/src/devtoolsPanel.vue
+++ b/packages/vue-query-devtools/src/devtoolsPanel.vue
@@ -45,5 +45,5 @@ onMounted(() => {
 </script>
 
 <template>
-  <div :style="style" className="tsqd-parent-container" ref="div"></div>
+  <div :style="style" class="tsqd-parent-container" ref="div"></div>
 </template>