docs: fix ssr hydration error (#680)

oruga-ui · Dec 10, 2023 · 4d8301f · 4d8301f
1 parent ba7e1d6
commit 4d8301f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/packages/docs-next/.vitepress/theme/components/ExampleViewer.vue b/packages/docs-next/.vitepress/theme/components/ExampleViewer.vue
@@ -87,7 +87,9 @@ function copy(val: string) {
 
 <template>
     <div v-if="component" ref="nodeRef" class="odocs-example odocs-mt">
-        <component :is="component" />
+        <ClientOnly>
+            <component :is="component" />
+        </ClientOnly>
     </div>
     <div v-if="showCode" class="vp-doc odocs-mt">
         <o-collapse

diff --git a/packages/docs-next/.vitepress/theme/components/InspectorWrapper.vue b/packages/docs-next/.vitepress/theme/components/InspectorWrapper.vue
@@ -61,12 +61,17 @@ watch(inspectClass, ({ className, action }) => {
             <b>'Classes applied to the element'</b>
             <div class="odocs-classes-applied">{{ classesApplied }}</div>
         </div>
-        <slot v-bind="{ ...classes, ...data }" />
 
-        <inspector
-            :inspect-data="inspectData"
-            :subitem="subitem"
-            @inspect="inspectClass = $event" />
+        <ClientOnly>
+            <slot v-bind="{ ...classes, ...data }" />
+        </ClientOnly>
+
+        <ClientOnly>
+            <Inspector
+                :inspect-data="inspectData"
+                :subitem="subitem"
+                @inspect="inspectClass = $event" />
+        </ClientOnly>
     </div>
 </template>