diff --git a/docs/content/2.guide/3.directory-structure/10.pages.md b/docs/content/2.guide/3.directory-structure/10.pages.md
index 9bf36c07f39..09d1cfc147e 100644
--- a/docs/content/2.guide/3.directory-structure/10.pages.md
+++ b/docs/content/2.guide/3.directory-structure/10.pages.md
@@ -19,8 +19,27 @@ Pages are Vue components and can have the `.vue`, `.js`, `.jsx`, `.ts` or `.tsx`
 ::code-group
 
 ```vue [pages/index.vue]
+<script lang="tsx" setup>
+const welcome = () => {
+  return <span>Welcome </span>
+};
+const nuxt3 = () => {
+  return <span>nuxt3</span>
+};
+const content = () => {
+  return (
+    <div>
+      {welcome()}
+      <span>to </span>
+      {nuxt3()}
+    </div>
+  );
+};
+</script>
 <template>
-  <h1>Index page</h1>
+  <div>
+    <content />
+  </div>
 </template>
 ```
 
@@ -28,7 +47,7 @@ Pages are Vue components and can have the `.vue`, `.js`, `.jsx`, `.ts` or `.tsx`
 // https://vuejs.org/guide/extras/render-function.html
 export default defineComponent({
   render () {
-    return h('h1', 'Index page')
+    return h('h1', 'Welcome to nuxt3')
   }
 })
 ```
@@ -37,11 +56,13 @@ export default defineComponent({
 // https://vuejs.org/guide/extras/render-function.html#jsx-tsx
 export default defineComponent({
   render () {
-    return <h1>Index page</h1>
+    return <h1>Welcome to nuxt3</h1>
   }
 })
 ```
 
+- `index.vue`: `window` can be used in functional components, and does not need to do `process.client` judgment
+
 ::
 
 The `pages/index.vue` file will be mapped to the `/` route of your application.