From 95871c90af33bf45e13e59672a54ad704218eb25 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 16 Jul 2026 07:15:29 +0000
Subject: [PATCH] fix(docs): Vue examples now follow the site light/dark theme

The Vue dockview examples passed the theme as a fallthrough `class` on
`<dockview-vue>`. dockview-core themes its shell element (defaulting to abyss),
and the fallthrough class landed on the outer host, outside the shell, so the
shell's darker default won and every Vue example rendered dark even in light
mode. React and Angular pass the theme as the `className` prop, which
dockview-core applies to the inner element (inside the shell) where it wins.

Route the theme through the `className` prop in all 34 Vue examples to match,
keeping `example-dock` (or the inline height style) on `class` so the dock still
gets its size through attribute fallthrough. The nearest theme class to the dock
is now `dockview-theme-light` in light mode across all 35 Vue examples (was
`dockview-theme-abyss`).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DFPcCn11Au4qu7YUyiCWMF
---
 .../docs/templates/dockview/advanced-overflow/vue/src/index.ts | 3 ++-
 .../docs/templates/dockview/auto-edge-groups/vue/src/index.ts  | 2 +-
 .../templates/dockview/auto-hide-edge-groups/vue/src/index.ts  | 2 +-
 packages/docs/templates/dockview/basic/vue/src/index.ts        | 2 +-
 packages/docs/templates/dockview/constraints/vue/src/index.ts  | 2 +-
 packages/docs/templates/dockview/context-menu/vue/src/index.ts | 2 +-
 .../docs/templates/dockview/custom-header/vue/src/index.ts     | 2 +-
 packages/docs/templates/dockview/dnd-events/vue/src/index.ts   | 3 ++-
 packages/docs/templates/dockview/dnd-external/vue/src/index.ts | 3 ++-
 packages/docs/templates/dockview/drop-guide/vue/src/index.ts   | 2 +-
 packages/docs/templates/dockview/edge-groups/vue/src/index.ts  | 2 +-
 .../docs/templates/dockview/floating-groups/vue/src/index.ts   | 3 ++-
 .../docs/templates/dockview/full-width-tab/vue/src/index.ts    | 2 +-
 .../docs/templates/dockview/group-actions/vue/src/index.ts     | 2 +-
 .../docs/templates/dockview/header-position/vue/src/index.ts   | 2 +-
 packages/docs/templates/dockview/iframe/vue/src/index.ts       | 2 +-
 packages/docs/templates/dockview/keyboard/vue/src/index.ts     | 2 +-
 .../docs/templates/dockview/layout-history/vue/src/index.ts    | 3 ++-
 packages/docs/templates/dockview/layout/vue/src/index.ts       | 3 ++-
 packages/docs/templates/dockview/locked/vue/src/index.ts       | 2 +-
 .../docs/templates/dockview/maximize-group/vue/src/index.ts    | 2 +-
 packages/docs/templates/dockview/nested/vue/src/index.ts       | 2 +-
 packages/docs/templates/dockview/pinned-tabs/vue/src/index.ts  | 2 +-
 packages/docs/templates/dockview/popout-group/vue/src/index.ts | 2 +-
 packages/docs/templates/dockview/render-mode/vue/src/index.ts  | 2 +-
 .../docs/templates/dockview/resize-container/vue/src/index.ts  | 2 +-
 packages/docs/templates/dockview/resize/vue/src/index.ts       | 2 +-
 packages/docs/templates/dockview/scrollbars/vue/src/index.ts   | 2 +-
 packages/docs/templates/dockview/smart-guides/vue/src/index.ts | 2 +-
 packages/docs/templates/dockview/tab-overflow/vue/src/index.ts | 3 ++-
 packages/docs/templates/dockview/tabview/vue/src/index.ts      | 2 +-
 .../docs/templates/dockview/update-parameters/vue/src/index.ts | 2 +-
 packages/docs/templates/dockview/update-title/vue/src/index.ts | 2 +-
 packages/docs/templates/dockview/watermark/vue/src/index.ts    | 2 +-
 34 files changed, 41 insertions(+), 34 deletions(-)

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>