From 3d5b3f8677f6cb47c2166504e67961286316df9c Mon Sep 17 00:00:00 2001
From: Kia King Ishii <kia.king.08@gmail.com>
Date: Tue, 9 Feb 2021 22:37:59 +0900
Subject: [PATCH] docs: add global component page

---
 docs/.vitepress/config.js               |  1 +
 docs/guide/differences-from-vuepress.md |  3 +--
 docs/guide/global-component.md          | 28 +++++++++++++++++++++++++
 3 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 docs/guide/global-component.md

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index e86d2dca..e085cbbe 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -61,6 +61,7 @@ function getGuideSidebar() {
       children: [
         { text: 'Frontmatter', link: '/guide/frontmatter' },
         { text: 'Global Computed', link: '/guide/global-computed' },
+        { text: 'Global Component', link: '/guide/global-component' },
         { text: 'Customization', link: '/guide/customization' },
         {
           text: 'Differences from Vuepress',
diff --git a/docs/guide/differences-from-vuepress.md b/docs/guide/differences-from-vuepress.md
index f3502537..94fdd4c0 100644
--- a/docs/guide/differences-from-vuepress.md
+++ b/docs/guide/differences-from-vuepress.md
@@ -110,8 +110,7 @@ In case you decide to move your project to VitePress, this is a list of differen
   - `path`
   - `regularPath`
 
-## Default Components
+## Global Components
 
 - Missing
-  - [`<ClientOnly>`](https://vuepress.vuejs.org/guide/using-vue.html#browser-api-access-restrictions)
   - [`<Badge>`](https://vuepress.vuejs.org/guide/using-vue.html#badge)
diff --git a/docs/guide/global-component.md b/docs/guide/global-component.md
new file mode 100644
index 00000000..8ce0f7b5
--- /dev/null
+++ b/docs/guide/global-component.md
@@ -0,0 +1,28 @@
+# Global Component
+
+VitePress comes with few built-in component that can be used globally. You may use these components in your markdown or your custom theme configuration.
+
+## Content
+
+The `Content` component displays the rendered markdown contents. Useful [when creating your own theme](http://localhost:3000/guide/customization.html).
+
+```vue
+<template>
+  <h1>Custom Layout!</h1>
+  <Content />
+</template>
+```
+
+## ClientOnly
+
+The `ClientOnly` component renderes its slot only at client side.
+
+Because VitePress applications are server-rendered in Node.js when generating static builds, any Vue usage must conform to the universal code requirements. In short, make sure to only access Browser / DOM APIs in beforeMount or mounted hooks.
+
+If you are using or demoing components that are not SSR-friendly (for example, contain custom directives), you can wrap them inside the `ClientOnly` component.
+
+```html
+<ClientOnly>
+  <NonSSRFriendlyComponent />
+</ClientOnly>
+```