From f1026d4e88b3976541b81d831b3d1ea59c011ac5 Mon Sep 17 00:00:00 2001
From: Julien Huang <63512348+huang-julien@users.noreply.github.com>
Date: Thu, 24 Nov 2022 12:15:33 +0100
Subject: [PATCH] docs: add warning about `.client` onMounted hook (#9263)

---
 .../1.docs/2.guide/2.directory-structure/1.components.md      | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/content/1.docs/2.guide/2.directory-structure/1.components.md b/docs/content/1.docs/2.guide/2.directory-structure/1.components.md
index 568609fc09..da003f2aa7 100644
--- a/docs/content/1.docs/2.guide/2.directory-structure/1.components.md
+++ b/docs/content/1.docs/2.guide/2.directory-structure/1.components.md
@@ -204,6 +204,10 @@ If a component is meant to be rendered only client-side, you can add the `.clien
 This feature only works with Nuxt auto-imports and `#components` imports. Explicitly importing these components from their real paths does not convert them into client-only components.
 ::
 
+::alert{type=warning}
+`.client` components are rendered only after being mounted. To access the rendered template using `onMounted()`, add `await nextTick()` in the callback of the `onMounted()` hook.
+::
+
 ## .server Components
 
 `.server` components are fallback components of `.client` components.