From 02227a2f1b86b077082c50b46cb7486a8672eabe Mon Sep 17 00:00:00 2001
From: Julien Huang <63512348+huang-julien@users.noreply.github.com>
Date: Sat, 22 Oct 2022 00:47:13 +0200
Subject: [PATCH] docs(api): add `<ClientOnly>` to API docs (#8400)

---
 .../3.api/2.components/1.client-only.md       | 41 +++++++++++++++++++
 .../{1.nuxt-page.md => 2.nuxt-page.md}        |  0
 .../{2.nuxt-layout.md => 3.nuxt-layout.md}    |  0
 ...dicator.md => 5.nuxt-loading-indicator.md} |  0
 ...r-boundary.md => 6.nuxt-error-boundary.md} |  0
 .../{6.nuxt-welcome.md => 7.nuxt-welcome.md}  |  0
 .../{7.teleports.md => 8.teleports.md}        |  0
 7 files changed, 41 insertions(+)
 create mode 100644 docs/content/3.api/2.components/1.client-only.md
 rename docs/content/3.api/2.components/{1.nuxt-page.md => 2.nuxt-page.md} (100%)
 rename docs/content/3.api/2.components/{2.nuxt-layout.md => 3.nuxt-layout.md} (100%)
 rename docs/content/3.api/2.components/{4.nuxt-loading-indicator.md => 5.nuxt-loading-indicator.md} (100%)
 rename docs/content/3.api/2.components/{5.nuxt-error-boundary.md => 6.nuxt-error-boundary.md} (100%)
 rename docs/content/3.api/2.components/{6.nuxt-welcome.md => 7.nuxt-welcome.md} (100%)
 rename docs/content/3.api/2.components/{7.teleports.md => 8.teleports.md} (100%)

diff --git a/docs/content/3.api/2.components/1.client-only.md b/docs/content/3.api/2.components/1.client-only.md
new file mode 100644
index 00000000000..8c1efe58737
--- /dev/null
+++ b/docs/content/3.api/2.components/1.client-only.md
@@ -0,0 +1,41 @@
+---
+description: The <ClientOnly> component renders its slot only in client-side.
+---
+# `<ClientOnly>`
+
+The `<ClientOnly>` component renders its slot only in client-side. To import a component only on the client, register the component in a client-side only plugin.
+
+## Props
+
+- **placeholderTag** | **fallbackTag**: specify a tag to be rendered server-side.
+- **placeholder** | **fallback**: specify a content to be rendered server-side.
+
+```vue
+<template>
+  <div>
+    <Sidebar />
+    <ClientOnly fallback-tag="span" fallback="Loading comments...">
+      <Comment />
+    </ClientOnly>
+  </div>
+</template>
+```
+
+## Slots
+
+- **#fallback**: specify a content to be displayed server-side.
+
+```vue
+<template>
+  <div>
+    <Sidebar />
+    <ClientOnly>
+      <!-- ... -->
+      <template #fallback>
+        <!-- this will be rendered on server side -->
+        <p>Loading comments...</p>
+      </template>
+    </ClientOnly>
+  </div>
+</template>
+```
diff --git a/docs/content/3.api/2.components/1.nuxt-page.md b/docs/content/3.api/2.components/2.nuxt-page.md
similarity index 100%
rename from docs/content/3.api/2.components/1.nuxt-page.md
rename to docs/content/3.api/2.components/2.nuxt-page.md
diff --git a/docs/content/3.api/2.components/2.nuxt-layout.md b/docs/content/3.api/2.components/3.nuxt-layout.md
similarity index 100%
rename from docs/content/3.api/2.components/2.nuxt-layout.md
rename to docs/content/3.api/2.components/3.nuxt-layout.md
diff --git a/docs/content/3.api/2.components/4.nuxt-loading-indicator.md b/docs/content/3.api/2.components/5.nuxt-loading-indicator.md
similarity index 100%
rename from docs/content/3.api/2.components/4.nuxt-loading-indicator.md
rename to docs/content/3.api/2.components/5.nuxt-loading-indicator.md
diff --git a/docs/content/3.api/2.components/5.nuxt-error-boundary.md b/docs/content/3.api/2.components/6.nuxt-error-boundary.md
similarity index 100%
rename from docs/content/3.api/2.components/5.nuxt-error-boundary.md
rename to docs/content/3.api/2.components/6.nuxt-error-boundary.md
diff --git a/docs/content/3.api/2.components/6.nuxt-welcome.md b/docs/content/3.api/2.components/7.nuxt-welcome.md
similarity index 100%
rename from docs/content/3.api/2.components/6.nuxt-welcome.md
rename to docs/content/3.api/2.components/7.nuxt-welcome.md
diff --git a/docs/content/3.api/2.components/7.teleports.md b/docs/content/3.api/2.components/8.teleports.md
similarity index 100%
rename from docs/content/3.api/2.components/7.teleports.md
rename to docs/content/3.api/2.components/8.teleports.md