diff --git a/docs/guide/i18n.md b/docs/guide/i18n.md
index 0d256c73..b055c160 100644
--- a/docs/guide/i18n.md
+++ b/docs/guide/i18n.md
@@ -75,25 +75,39 @@ However, VitePress won't redirect `/` to `/en/` by default. You'll need to confi
 /*  /en/:splat  302
 ```
 
-**Pro tip:** If using the above approach, you can use `nf_lang` cookie to persist user's language choice. A very basic way to do this is register a watcher inside the [setup](./custom-theme#using-a-custom-theme) function of custom theme:
+**Pro tip:** If using the above approach, you can use `nf_lang` cookie to persist user's language choice:
 
 ```ts
 // docs/.vitepress/theme/index.ts
 import DefaultTheme from 'vitepress/theme'
+import Layout from './Layout.vue'
 
 export default {
   extends: DefaultTheme,
-  setup() {
-    const { lang } = useData()
-    watchEffect(() => {
-      if (inBrowser) {
-        document.cookie = `nf_lang=${lang.value}; expires=Mon, 1 Jan 2024 00:00:00 UTC; path=/`
-      }
-    })
-  }
+  Layout
 }
 ```
 
+```vue
+<!-- docs/.vitepress/theme/Layout.vue -->
+<script setup lang="ts">
+import DefaultTheme from 'vitepress/theme'
+import { useData } from 'vitepress'
+import { watchEffect } from 'vue'
+
+const { lang } = useData()
+watchEffect(() => {
+  if (inBrowser) {
+    document.cookie = `nf_lang=${lang.value}; expires=Mon, 1 Jan 2030 00:00:00 UTC; path=/`
+  }
+})
+</script>
+
+<template>
+  <DefaultTheme.Layout />
+</template>
+```
+
 ## RTL Support (Experimental)
 
 For RTL support, specify `dir: 'rtl'` in config and use some RTLCSS PostCSS plugin like <https://github.com/MohammadYounes/rtlcss>, <https://github.com/vkalinichev/postcss-rtl> or <https://github.com/elchininet/postcss-rtlcss>. You'll need to configure your PostCSS plugin to use `:where([dir="ltr"])` and `:where([dir="rtl"])` as prefixes to prevent CSS specificity issues.
diff --git a/docs/zh/guide/i18n.md b/docs/zh/guide/i18n.md
index 5a043b7d..d74b727a 100644
--- a/docs/zh/guide/i18n.md
+++ b/docs/zh/guide/i18n.md
@@ -75,25 +75,39 @@ docs/
 /*  /en/:splat  302
 ```
 
-**提示：** 如果使用上述的方法，可以使用`nf_lang` cookie 来保存用户的语言选择。一个非常基础的方法是通过在自定义主题的 [setup](./custom-theme#using-a-custom-theme) 函数中注册一个监听器：
+**提示：** 如果使用上述的方法，可以使用`nf_lang` cookie 来保存用户的语言选择。例如，可以在主题中添加以下代码：
 
 ```ts
 // docs/.vitepress/theme/index.ts
 import DefaultTheme from 'vitepress/theme'
+import Layout from './Layout.vue'
 
 export default {
   extends: DefaultTheme,
-  setup() {
-    const { lang } = useData()
-    watchEffect(() => {
-      if (inBrowser) {
-        document.cookie = `nf_lang=${lang.value}; expires=Mon, 1 Jan 2024 00:00:00 UTC; path=/`
-      }
-    })
-  }
+  Layout
 }
 ```
 
+```vue
+<!-- docs/.vitepress/theme/Layout.vue -->
+<script setup lang="ts">
+import DefaultTheme from 'vitepress/theme'
+import { useData } from 'vitepress'
+import { watchEffect } from 'vue'
+
+const { lang } = useData()
+watchEffect(() => {
+  if (inBrowser) {
+    document.cookie = `nf_lang=${lang.value}; expires=Mon, 1 Jan 2030 00:00:00 UTC; path=/`
+  }
+})
+</script>
+
+<template>
+  <DefaultTheme.Layout />
+</template>
+```
+
 ## RTL 支持 (实验性功能) {#rtl-support-experimental}
 
 支持 RTL 需要在配置中指定 `dir: 'rtl'` 并且使用一些 RTLCSS PostCSS 插件，例如 <https://github.com/MohammadYounes/rtlcss>, <https://github.com/vkalinichev/postcss-rtl> 或者 <https://github.com/elchininet/postcss-rtlcss>。需要配置 PostCSS 插件，使用 `:where([dir="ltr"])` 和 `:where([dir="rtl"])` 作为前缀，以防止 CSS 特异性问题。