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>