From 83d6665627f5c85f14f4843868768f430318ef62 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Tue, 30 Aug 2022 19:20:05 +0200
Subject: [PATCH 1/4] docs(guid): add .client components documentation

---
 .../3.directory-structure/4.components.md     | 22 +++++++++++++++++++
 1 file changed, 22 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 db5d9ca487c..ed47fec5774 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,28 @@ 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 theses components does not convert them into client-only components.
+::
+
 ## Library Authors
 
 Making Vue component libraries with automatic tree-shaking and component registration is super easy ✨

From 8e4e430dd73945199dd5fc81aed1494ec0edc591 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Tue, 30 Aug 2022 19:25:14 +0200
Subject: [PATCH 2/4] docs(guide): add ```to wrap .client

---
 docs/content/2.guide/3.directory-structure/4.components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 ed47fec5774..10aaade13be 100644
--- a/docs/content/2.guide/3.directory-structure/4.components.md
+++ b/docs/content/2.guide/3.directory-structure/4.components.md
@@ -184,7 +184,7 @@ Make sure not to _nest_ `<ClientOnly>` components or other client-only component
 
 ## .client Components
 
-If a component is meant to be rendered only client-side, you can add the .client suffix to your component.
+If a component is meant to be rendered only client-side, you can add the `.client` suffix to your component.
 
 ```bash
 | components/ 

From 7c3e2beece4e2dade75723622a15400eb667b3e5 Mon Sep 17 00:00:00 2001
From: julien huang <julien.huang@outlook.fr>
Date: Tue, 30 Aug 2022 19:42:28 +0200
Subject: [PATCH 3/4] docs(guide): add .server client doc

---
 .../3.directory-structure/4.components.md     | 19 +++++++++++++++++++
 1 file changed, 19 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 10aaade13be..e347ea644b2 100644
--- a/docs/content/2.guide/3.directory-structure/4.components.md
+++ b/docs/content/2.guide/3.directory-structure/4.components.md
@@ -204,6 +204,25 @@ If a component is meant to be rendered only client-side, you can add the `.clien
 This feature only works with Nuxt auto-imports. Explicitly importing theses 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 ✨

From 682c8652c0ea3c0be26c61dc791bf10429e9bfd4 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sat, 3 Sep 2022 14:18:32 +0100
Subject: [PATCH 4/4] docs: tpyo

---
 docs/content/2.guide/3.directory-structure/4.components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 e347ea644b2..f74e63a3660 100644
--- a/docs/content/2.guide/3.directory-structure/4.components.md
+++ b/docs/content/2.guide/3.directory-structure/4.components.md
@@ -201,7 +201,7 @@ If a component is meant to be rendered only client-side, you can add the `.clien
 ```
 
 ::alert{type=warning}
-This feature only works with Nuxt auto-imports. Explicitly importing theses components does not convert them into client-only components.
+This feature only works with Nuxt auto-imports. Explicitly importing these components does not convert them into client-only components.
 ::
 
 ## .server Components