From 8809d2dbfc6818ba1618fa43368a45130d940890 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Fri, 4 Dec 2020 22:48:52 -0500
Subject: [PATCH] feat: built-in ClientOnly component

---
 src/client/app/components/ClientOnly.ts | 11 +++++++++++
 src/client/app/components/Content.ts    |  6 +++---
 src/client/app/mixin.ts                 |  3 ++-
 3 files changed, 16 insertions(+), 4 deletions(-)
 create mode 100644 src/client/app/components/ClientOnly.ts

diff --git a/src/client/app/components/ClientOnly.ts b/src/client/app/components/ClientOnly.ts
new file mode 100644
index 00000000..2e1da7c3
--- /dev/null
+++ b/src/client/app/components/ClientOnly.ts
@@ -0,0 +1,11 @@
+import { ref, onMounted, defineComponent } from 'vue'
+
+export const ClientOnly = defineComponent({
+  setup(_, { slots }) {
+    const show = ref(false)
+    onMounted(() => {
+      show.value = true
+    })
+    return () => (show.value && slots.default ? slots.default() : null)
+  }
+})
diff --git a/src/client/app/components/Content.ts b/src/client/app/components/Content.ts
index 15f9ab0a..71883217 100644
--- a/src/client/app/components/Content.ts
+++ b/src/client/app/components/Content.ts
@@ -1,10 +1,10 @@
-import { h } from 'vue'
+import { defineComponent, h } from 'vue'
 import { useRoute } from '../router'
 
-export const Content = {
+export const Content = defineComponent({
   name: 'VitePressContent',
   setup() {
     const route = useRoute()
     return () => (route.component ? h(route.component) : null)
   }
-}
+})
diff --git a/src/client/app/mixin.ts b/src/client/app/mixin.ts
index e33a5b9e..95dc8863 100644
--- a/src/client/app/mixin.ts
+++ b/src/client/app/mixin.ts
@@ -4,6 +4,7 @@ import { SiteDataRef } from './composables/siteData'
 import { PageDataRef } from './composables/pageData'
 import { Content } from './components/Content'
 import Debug from './components/Debug.vue'
+import { ClientOnly } from './components/ClientOnly'
 
 export function mixinGlobalComputed(
   app: App,
@@ -68,6 +69,6 @@ export function mixinGlobalComponents(app: App) {
   const isProd = process.env.NODE_ENV === 'production'
 
   app.component('Content', Content)
-
+  app.component('ClientOnly', ClientOnly)
   app.component('Debug', isProd ? () => null : Debug)
 }