diff --git a/packages/docs/templates/dockview/advanced-overflow/vue/src/index.ts b/packages/docs/templates/dockview/advanced-overflow/vue/src/index.ts
index 47b3a1e09..8493e78c9 100644
--- a/packages/docs/templates/dockview/advanced-overflow/vue/src/index.ts
+++ b/packages/docs/templates/dockview/advanced-overflow/vue/src/index.ts
@@ -74,7 +74,8 @@ const App = defineComponent({
           <button @click="addPanel">Add Tab</button>
         </div>
         <dockview-vue
-          class="example-dock ${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+          class="example-dock"
+          className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
           :overflow="{ mode: 'dropdown', search: { placeholder: 'Search tabs…' }, mru: true }"
           @ready="onReady"
         >
diff --git a/packages/docs/templates/dockview/auto-edge-groups/vue/src/index.ts b/packages/docs/templates/dockview/auto-edge-groups/vue/src/index.ts
index 500846446..948390130 100644
--- a/packages/docs/templates/dockview/auto-edge-groups/vue/src/index.ts
+++ b/packages/docs/templates/dockview/auto-edge-groups/vue/src/index.ts
@@ -65,7 +65,7 @@ const App = defineComponent({
     template: `
       <dockview-vue
         style="width:100%;height:100%"
-        class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+        className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
         :dockToEdgeGroups="true"
         :autoHideEdgeGroups="true"
         @ready="onReady"
diff --git a/packages/docs/templates/dockview/auto-hide-edge-groups/vue/src/index.ts b/packages/docs/templates/dockview/auto-hide-edge-groups/vue/src/index.ts
index 25007b68f..e4acc45b2 100644
--- a/packages/docs/templates/dockview/auto-hide-edge-groups/vue/src/index.ts
+++ b/packages/docs/templates/dockview/auto-hide-edge-groups/vue/src/index.ts
@@ -102,7 +102,7 @@ const App = defineComponent({
     template: `
       <dockview-vue
         style="width:100%;height:100%"
-        class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+        className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
         :autoHideEdgeGroups="true"
         @ready="onReady"
       >
diff --git a/packages/docs/templates/dockview/basic/vue/src/index.ts b/packages/docs/templates/dockview/basic/vue/src/index.ts
index 0efb3b450..ca35d9bef 100644
--- a/packages/docs/templates/dockview/basic/vue/src/index.ts
+++ b/packages/docs/templates/dockview/basic/vue/src/index.ts
@@ -79,7 +79,7 @@ const App = defineComponent({
     template: `
       <dockview-vue
         style="width:100%; height:100%"
-        class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+        className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
         @ready="onReady"
       >
       </dockview-vue>`,
diff --git a/packages/docs/templates/dockview/constraints/vue/src/index.ts b/packages/docs/templates/dockview/constraints/vue/src/index.ts
index 86199c6d1..2e153cbdb 100644
--- a/packages/docs/templates/dockview/constraints/vue/src/index.ts
+++ b/packages/docs/templates/dockview/constraints/vue/src/index.ts
@@ -116,7 +116,7 @@ const App = defineComponent({
     },
     template: `
         <dockview-vue
-            class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+            className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
             @ready="onReady"
             style="width: 100%; height: 100%;">
         </dockview-vue>
diff --git a/packages/docs/templates/dockview/context-menu/vue/src/index.ts b/packages/docs/templates/dockview/context-menu/vue/src/index.ts
index 2c8a9e457..bdfbe4039 100644
--- a/packages/docs/templates/dockview/context-menu/vue/src/index.ts
+++ b/packages/docs/templates/dockview/context-menu/vue/src/index.ts
@@ -97,7 +97,7 @@ const App = defineComponent({
     template: `
       <dockview-vue
         style="width:100%;height:100%"
-        class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+        className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
         @ready="onReady"
         :getTabContextMenuItems="getTabContextMenuItems"
       />`,
diff --git a/packages/docs/templates/dockview/custom-header/vue/src/index.ts b/packages/docs/templates/dockview/custom-header/vue/src/index.ts
index 8922f5b15..69d3d9fe5 100644
--- a/packages/docs/templates/dockview/custom-header/vue/src/index.ts
+++ b/packages/docs/templates/dockview/custom-header/vue/src/index.ts
@@ -148,7 +148,7 @@ const App = defineComponent({
     template: `
       <dockview-vue
         style="width:100%;height:100%"
-        class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+        className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
         @ready="onReady"
       >
       </dockview-vue>`,
diff --git a/packages/docs/templates/dockview/dnd-events/vue/src/index.ts b/packages/docs/templates/dockview/dnd-events/vue/src/index.ts
index eeb090d28..059b3453c 100644
--- a/packages/docs/templates/dockview/dnd-events/vue/src/index.ts
+++ b/packages/docs/templates/dockview/dnd-events/vue/src/index.ts
@@ -172,7 +172,8 @@ const App = defineComponent({
                 </button>
             </div>
             <dockview-vue
-                class="example-dock ${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+                class="example-dock"
+                className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
                 @ready="onReady">
             </dockview-vue>
         </div>
diff --git a/packages/docs/templates/dockview/dnd-external/vue/src/index.ts b/packages/docs/templates/dockview/dnd-external/vue/src/index.ts
index 3bf79d4e8..4ec542894 100644
--- a/packages/docs/templates/dockview/dnd-external/vue/src/index.ts
+++ b/packages/docs/templates/dockview/dnd-external/vue/src/index.ts
@@ -207,7 +207,8 @@ const App = defineComponent({
                 </template>
             </div>
             <dockview-vue
-                class="example-dock ${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+                class="example-dock"
+                className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
                 :dnd-edges="{ size: { value: 100, type: 'pixels' }, activationSize: { value: 5, type: 'percentage' } }"
                 @ready="onReady"
                 @didDrop="onDidDrop">
diff --git a/packages/docs/templates/dockview/drop-guide/vue/src/index.ts b/packages/docs/templates/dockview/drop-guide/vue/src/index.ts
index 58f7c10ff..02b921a84 100644
--- a/packages/docs/templates/dockview/drop-guide/vue/src/index.ts
+++ b/packages/docs/templates/dockview/drop-guide/vue/src/index.ts
@@ -74,7 +74,7 @@ const App = defineComponent({
     template: `
       <dockview-vue
         style="width:100%;height:100%"
-        class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+        className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
         :dndGuide="true"
         @ready="onReady"
       >
diff --git a/packages/docs/templates/dockview/edge-groups/vue/src/index.ts b/packages/docs/templates/dockview/edge-groups/vue/src/index.ts
index 95825f1b9..a432295fd 100644
--- a/packages/docs/templates/dockview/edge-groups/vue/src/index.ts
+++ b/packages/docs/templates/dockview/edge-groups/vue/src/index.ts
@@ -162,7 +162,7 @@ const App = defineComponent({
     template: `
       <dockview-vue
         style="width:100%; height:100%"
-        class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+        className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
         @ready="onReady"
         rightHeaderActionsComponent="rightAction"
       >
diff --git a/packages/docs/templates/dockview/floating-groups/vue/src/index.ts b/packages/docs/templates/dockview/floating-groups/vue/src/index.ts
index 6efe087c7..acfca17e6 100644
--- a/packages/docs/templates/dockview/floating-groups/vue/src/index.ts
+++ b/packages/docs/templates/dockview/floating-groups/vue/src/index.ts
@@ -290,7 +290,8 @@ const App = defineComponent({
         <button @click="onToggleEnabled">{{ (disableFloatingGroups ? 'Enable' : 'Disable') + ' floating groups' }}</button>
       </div>
       <dockview-vue
-        class="example-dock ${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+        class="example-dock"
+        className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
         @ready="onReady"
         :floatingGroupBounds="bounds"
         :disableFloatingGroups="disableFloatingGroups"
diff --git a/packages/docs/templates/dockview/full-width-tab/vue/src/index.ts b/packages/docs/templates/dockview/full-width-tab/vue/src/index.ts
index e7daad996..7673e828a 100644
--- a/packages/docs/templates/dockview/full-width-tab/vue/src/index.ts
+++ b/packages/docs/templates/dockview/full-width-tab/vue/src/index.ts
@@ -116,7 +116,7 @@ const App = defineComponent({
     template: `
       <dockview-vue
         style="width:100%;height:100%"
-        class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+        className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
         single-tab-mode="fullwidth"
         @ready="onReady"
       >
diff --git a/packages/docs/templates/dockview/group-actions/vue/src/index.ts b/packages/docs/templates/dockview/group-actions/vue/src/index.ts
index 8d04273f6..f292b40bd 100644
--- a/packages/docs/templates/dockview/group-actions/vue/src/index.ts
+++ b/packages/docs/templates/dockview/group-actions/vue/src/index.ts
@@ -140,7 +140,7 @@ const App = defineComponent({
     template: `
       <dockview-vue
         style="width:100%;height:100%"
-        class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+        className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
         @ready="onReady"
         leftHeaderActionsComponent="leftAction"
         rightHeaderActionsComponent="rightAction"
diff --git a/packages/docs/templates/dockview/header-position/vue/src/index.ts b/packages/docs/templates/dockview/header-position/vue/src/index.ts
index c1f917464..1452cc049 100644
--- a/packages/docs/templates/dockview/header-position/vue/src/index.ts
+++ b/packages/docs/templates/dockview/header-position/vue/src/index.ts
@@ -93,7 +93,7 @@ const App = defineComponent({
     },
     template: `
         <dockview-vue
-            class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+            className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
             defaultHeaderPosition="bottom"
             @ready="onReady"
             style="width: 100%; height: 100%;">
diff --git a/packages/docs/templates/dockview/iframe/vue/src/index.ts b/packages/docs/templates/dockview/iframe/vue/src/index.ts
index 751b05d1b..ec55ccae9 100644
--- a/packages/docs/templates/dockview/iframe/vue/src/index.ts
+++ b/packages/docs/templates/dockview/iframe/vue/src/index.ts
@@ -90,7 +90,7 @@ const App = defineComponent({
     template: `
       <dockview-vue
         style="width:100%;height:100%"
-        class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+        className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
         @ready="onReady"
       >
       </dockview-vue>`,
diff --git a/packages/docs/templates/dockview/keyboard/vue/src/index.ts b/packages/docs/templates/dockview/keyboard/vue/src/index.ts
index 2d3567fc9..1cccd4ffa 100644
--- a/packages/docs/templates/dockview/keyboard/vue/src/index.ts
+++ b/packages/docs/templates/dockview/keyboard/vue/src/index.ts
@@ -100,7 +100,7 @@ const App = defineComponent({
     template: `
       <dockview-vue
         style="width:100%;height:100%"
-        class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+        className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
         :keyboardNavigation="keyboardNavigation"
         @ready="onReady"
       >
diff --git a/packages/docs/templates/dockview/layout-history/vue/src/index.ts b/packages/docs/templates/dockview/layout-history/vue/src/index.ts
index cb90ecd52..15ec76476 100644
--- a/packages/docs/templates/dockview/layout-history/vue/src/index.ts
+++ b/packages/docs/templates/dockview/layout-history/vue/src/index.ts
@@ -119,7 +119,8 @@ const App = defineComponent({
           <button @click="addPanel">Add Panel</button>
         </div>
         <dockview-vue
-          class="example-dock ${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+          class="example-dock"
+          className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
           :layoutHistory="{ enabled: true, undoableProgrammaticMutations: true }"
           @ready="onReady"
         >
diff --git a/packages/docs/templates/dockview/layout/vue/src/index.ts b/packages/docs/templates/dockview/layout/vue/src/index.ts
index 43fa8697a..50eeab5d9 100644
--- a/packages/docs/templates/dockview/layout/vue/src/index.ts
+++ b/packages/docs/templates/dockview/layout/vue/src/index.ts
@@ -119,7 +119,8 @@ const App = defineComponent({
           <button @click="clearLayout">Reset Layout</button>
         </div>
         <dockview-vue
-          class="example-dock ${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+          class="example-dock"
+          className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
           watermarkComponent="watermark"
           @ready="onReady"
         >
diff --git a/packages/docs/templates/dockview/locked/vue/src/index.ts b/packages/docs/templates/dockview/locked/vue/src/index.ts
index 386ba1125..2982fba8f 100644
--- a/packages/docs/templates/dockview/locked/vue/src/index.ts
+++ b/packages/docs/templates/dockview/locked/vue/src/index.ts
@@ -80,7 +80,7 @@ const App = defineComponent({
     template: `
       <dockview-vue
         style="width:100%;height:100%"
-        class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+        className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
         @ready="onReady"
         :locked="true"
       ></dockview-vue>`,
diff --git a/packages/docs/templates/dockview/maximize-group/vue/src/index.ts b/packages/docs/templates/dockview/maximize-group/vue/src/index.ts
index aaec9ff9d..df33cbe6f 100644
--- a/packages/docs/templates/dockview/maximize-group/vue/src/index.ts
+++ b/packages/docs/templates/dockview/maximize-group/vue/src/index.ts
@@ -200,7 +200,7 @@ const App = defineComponent({
     template: `
       <dockview-vue
         style="width:100%;height:100%"
-        class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+        className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
         @ready="onReady"
         leftHeaderActionsComponent="leftAction"
         rightHeaderActionsComponent="rightAction"
diff --git a/packages/docs/templates/dockview/nested/vue/src/index.ts b/packages/docs/templates/dockview/nested/vue/src/index.ts
index f1be1ccf6..2a9bb89dd 100644
--- a/packages/docs/templates/dockview/nested/vue/src/index.ts
+++ b/packages/docs/templates/dockview/nested/vue/src/index.ts
@@ -99,7 +99,7 @@ const App = defineComponent({
     template: `
       <dockview-vue
         style="width:100%;height:100%"
-        class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+        className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
         @ready="onReady"
       ></dockview-vue>`,
 });
diff --git a/packages/docs/templates/dockview/pinned-tabs/vue/src/index.ts b/packages/docs/templates/dockview/pinned-tabs/vue/src/index.ts
index b3a7598aa..688db25a2 100644
--- a/packages/docs/templates/dockview/pinned-tabs/vue/src/index.ts
+++ b/packages/docs/templates/dockview/pinned-tabs/vue/src/index.ts
@@ -80,7 +80,7 @@ const App = defineComponent({
     template: `
       <dockview-vue
         style="width:100%;height:100%"
-        class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+        className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
         :pinnedTabs="pinnedTabs"
         @ready="onReady"
       >
diff --git a/packages/docs/templates/dockview/popout-group/vue/src/index.ts b/packages/docs/templates/dockview/popout-group/vue/src/index.ts
index 1d43e622b..7c631429d 100644
--- a/packages/docs/templates/dockview/popout-group/vue/src/index.ts
+++ b/packages/docs/templates/dockview/popout-group/vue/src/index.ts
@@ -215,7 +215,7 @@ const App = defineComponent({
       <div class="example-dock">
         <dockview-vue
           style="width:100%;height:100%"
-          class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+          className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
           @ready="onReady"
           :floatingGroupBounds="bounds"
           leftHeaderActionsComponent="leftAction"
diff --git a/packages/docs/templates/dockview/render-mode/vue/src/index.ts b/packages/docs/templates/dockview/render-mode/vue/src/index.ts
index cc45e8867..8751055b1 100644
--- a/packages/docs/templates/dockview/render-mode/vue/src/index.ts
+++ b/packages/docs/templates/dockview/render-mode/vue/src/index.ts
@@ -95,7 +95,7 @@ const App = defineComponent({
     template: `
       <dockview-vue
         style="width:100%;height:100%"
-        class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+        className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
         @ready="onReady"
       ></dockview-vue>`,
 });
diff --git a/packages/docs/templates/dockview/resize-container/vue/src/index.ts b/packages/docs/templates/dockview/resize-container/vue/src/index.ts
index 8b7d76550..2694333f8 100644
--- a/packages/docs/templates/dockview/resize-container/vue/src/index.ts
+++ b/packages/docs/templates/dockview/resize-container/vue/src/index.ts
@@ -129,7 +129,7 @@ const App = defineComponent({
           <div :style="styleObject">
             <dockview-vue
               style="width:100%;height:100%"
-              class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+              className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
               @ready="onReady"
               :disableFloatingGroups=true
             ></dockview-vue>
diff --git a/packages/docs/templates/dockview/resize/vue/src/index.ts b/packages/docs/templates/dockview/resize/vue/src/index.ts
index 8cab8765b..82db173f0 100644
--- a/packages/docs/templates/dockview/resize/vue/src/index.ts
+++ b/packages/docs/templates/dockview/resize/vue/src/index.ts
@@ -118,7 +118,7 @@ const App = defineComponent({
     template: `
       <dockview-vue
         style="width:100%;height:100%"
-        class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+        className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
         @ready="onReady"
       ></dockview-vue>`,
 });
diff --git a/packages/docs/templates/dockview/scrollbars/vue/src/index.ts b/packages/docs/templates/dockview/scrollbars/vue/src/index.ts
index 61367d465..cbca0f852 100644
--- a/packages/docs/templates/dockview/scrollbars/vue/src/index.ts
+++ b/packages/docs/templates/dockview/scrollbars/vue/src/index.ts
@@ -80,7 +80,7 @@ const App = defineComponent({
     template: `
       <dockview-vue
         style="width:100%;height:100%"
-        class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+        className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
         @ready="onReady"
         :disableFloatingGroups="true"
       ></dockview-vue>`,
diff --git a/packages/docs/templates/dockview/smart-guides/vue/src/index.ts b/packages/docs/templates/dockview/smart-guides/vue/src/index.ts
index 00d6a506b..77d478598 100644
--- a/packages/docs/templates/dockview/smart-guides/vue/src/index.ts
+++ b/packages/docs/templates/dockview/smart-guides/vue/src/index.ts
@@ -83,7 +83,7 @@ const App = defineComponent({
     template: `
       <dockview-vue
         style="width:100%;height:100%"
-        class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+        className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
         :smartGuides="smartGuides"
         @ready="onReady"
       >
diff --git a/packages/docs/templates/dockview/tab-overflow/vue/src/index.ts b/packages/docs/templates/dockview/tab-overflow/vue/src/index.ts
index b18bd602d..2f3398643 100644
--- a/packages/docs/templates/dockview/tab-overflow/vue/src/index.ts
+++ b/packages/docs/templates/dockview/tab-overflow/vue/src/index.ts
@@ -116,7 +116,8 @@ const App = defineComponent({
           </button>
         </div>
         <dockview-vue
-          class="example-dock ${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+          class="example-dock"
+          className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
           :overflow="{ mode }"
           :pinnedTabs="{ enabled: true }"
           :getTabContextMenuItems="getTabContextMenuItems"
diff --git a/packages/docs/templates/dockview/tabview/vue/src/index.ts b/packages/docs/templates/dockview/tabview/vue/src/index.ts
index fd6b66e92..1ff1a9e58 100644
--- a/packages/docs/templates/dockview/tabview/vue/src/index.ts
+++ b/packages/docs/templates/dockview/tabview/vue/src/index.ts
@@ -88,7 +88,7 @@ const App = defineComponent({
     template: `
       <dockview-vue
         style="width:100%;height:100%"
-        class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+        className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
         @ready="onReady"
         :disableFloatingGroups=true
       ></dockview-vue>`,
diff --git a/packages/docs/templates/dockview/update-parameters/vue/src/index.ts b/packages/docs/templates/dockview/update-parameters/vue/src/index.ts
index 3065a83e9..2a5e0c464 100644
--- a/packages/docs/templates/dockview/update-parameters/vue/src/index.ts
+++ b/packages/docs/templates/dockview/update-parameters/vue/src/index.ts
@@ -149,7 +149,7 @@ const App = defineComponent({
     template: `
       <dockview-vue
         style="width:100%;height:100%"
-        class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+        className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
         @ready="onReady"
       ></dockview-vue>`,
 });
diff --git a/packages/docs/templates/dockview/update-title/vue/src/index.ts b/packages/docs/templates/dockview/update-title/vue/src/index.ts
index d32461b85..238ac9a3a 100644
--- a/packages/docs/templates/dockview/update-title/vue/src/index.ts
+++ b/packages/docs/templates/dockview/update-title/vue/src/index.ts
@@ -92,7 +92,7 @@ const App = defineComponent({
     template: `
       <dockview-vue
         style="width:100%;height:100%"
-        class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+        className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
         @ready="onReady"
       ></dockview-vue>`,
 });
diff --git a/packages/docs/templates/dockview/watermark/vue/src/index.ts b/packages/docs/templates/dockview/watermark/vue/src/index.ts
index aacf516ff..2390921c4 100644
--- a/packages/docs/templates/dockview/watermark/vue/src/index.ts
+++ b/packages/docs/templates/dockview/watermark/vue/src/index.ts
@@ -111,7 +111,7 @@ const App = defineComponent({
         <div class="example-dock">
           <dockview-vue
             style="width:100%;height:100%"
-            class="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
+            className="${(window as any).__dockviewThemeClass ?? 'dockview-theme-abyss'}"
             @ready="onReady"
             watermarkComponent="watermarkComponent"
           ></dockview-vue>