From d947f511d9b8112187f9ca3a37117288d93aa02f Mon Sep 17 00:00:00 2001
From: Zakhar Shymanchyk <zahar.shamanchik@gmail.com>
Date: Tue, 21 Jan 2025 19:01:27 +0700
Subject: [PATCH] docs: explain how to use `ClientOnly` with `onMounted` hook
 (#30670)

---
 docs/3.api/1.components/1.client-only.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/docs/3.api/1.components/1.client-only.md b/docs/3.api/1.components/1.client-only.md
index 86e56d2547..1d3b50cf38 100644
--- a/docs/3.api/1.components/1.client-only.md
+++ b/docs/3.api/1.components/1.client-only.md
@@ -51,3 +51,26 @@ The content of the default slot will be tree-shaken out of the server build. (Th
   </div>
 </template>
 ```
+
+## Examples
+
+### Accessing HTML Elements
+
+Components inside `<ClientOnly>` are rendered only after being mounted. To access the rendered elements in the DOM, you can watch a template ref:
+
+```vue [pages/example.vue]
+<script setup lang="ts">
+const nuxtWelcomeRef = ref()
+
+// The watch will be triggered when the component is available
+watch(nuxtWelcomeRef, () => {
+ console.log('<NuxtWelcome /> mounted')
+}, { once: true })
+</script>
+
+<template>
+  <ClientOnly>
+    <NuxtWelcome ref="nuxtWelcomeRef" />
+  </ClientOnly>
+</template>
+```