From ee60411cb99ab39412ee076efe8fbde5940d137d Mon Sep 17 00:00:00 2001
From: Julien Huang <63512348+huang-julien@users.noreply.github.com>
Date: Sat, 3 Sep 2022 15:26:43 +0200
Subject: [PATCH] docs(guide): add `.client` and `.server` components (#7084)

---
 .../3.directory-structure/4.components.md     | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/docs/content/2.guide/3.directory-structure/4.components.md b/docs/content/2.guide/3.directory-structure/4.components.md
index db5d9ca487..f74e63a366 100644
--- a/docs/content/2.guide/3.directory-structure/4.components.md
+++ b/docs/content/2.guide/3.directory-structure/4.components.md
@@ -182,6 +182,47 @@ Use a slot as fallback until `<ClientOnly>` is mounted on client side.
 Make sure not to _nest_ `<ClientOnly>` components or other client-only components. Nuxt performs an optimization to remove the contents of these components from the server-side render, which can break in this case.
 :: -->
 
+## .client Components
+
+If a component is meant to be rendered only client-side, you can add the `.client` suffix to your component.
+
+```bash
+| components/ 
+--| Comments.client.vue
+```
+
+```html{}[pages/example.vue]
+<template>
+  <div>
+    <!-- this component will only be rendered on client side -->
+    <Comments />
+  </div>
+</template>
+```
+
+::alert{type=warning}
+This feature only works with Nuxt auto-imports. Explicitly importing these components does not convert them into client-only components.
+::
+
+## .server Components
+
+`.server` components are fallback components of `.client` components.
+
+```bash
+| components/ 
+--| Comments.client.vue
+--| Comments.server.vue
+```
+
+```html{}[pages/example.vue]
+<template>
+  <div> 
+    <!-- this component will render Comments.server server-side then Comments.client once mounted in client-side -->
+    <Comments />
+  </div>
+</template>
+```
+
 ## Library Authors
 
 Making Vue component libraries with automatic tree-shaking and component registration is super easy ✨