@intlayer/docs 9.5.5 → 9.5.7

package/docs/vi/intlayer_with_astro_solid.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-06-23
+updatedAt: 2026-09-21
 title: "Astro + Solid i18n - Hướng dẫn đầy đủ để dịch ứng dụng của bạn"
 description: "Không còn i18next nữa. Hướng dẫn 2026 để xây dựng ứng dụng Astro + Solid đa ngôn ngữ (i18n). Dịch với các AI agent và tối ưu hóa kích thước bundle, SEO và hiệu suất."
 keywords:
@@ -19,6 +19,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Sử dụng các hook useIntlayer / useLocale của astro-intlayer trong trang Astro"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Cập nhật cách sử dụng API useIntlayer của Solid sang truy cập thuộc tính trực tiếp"
@@ -150,7 +153,7 @@ bun add intlayer astro-intlayer solid-js solid-intlayer @astrojs/solid-js
   Gói cốt lõi cung cấp các công cụ i18n để quản lý cấu hình, bản dịch, [khai báo nội dung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/content_file.md), chuyển mã và [các lệnh CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/cli/index.md).
 
 - **astro-intlayer**
-  Plugin tích hợp Astro để kết nối Intlayer với [trình đóng gói Vite](https://vite.dev/guide/why.html#why-bundle-for-production); nó cũng bao gồm middleware để phát hiện ngôn ngữ ưa thích của người dùng, quản lý cookie và xử lý chuyển hướng URL.
+  Bao gồm plugin tích hợp Astro để tích hợp Intlayer với [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), một middleware phân giải ngôn ngữ của mỗi yêu cầu vào `Astro.locals.intlayer`, và các hook `useIntlayer` / `useDictionary` / `useLocale`. Cùng một đường dẫn import sẽ phân giải thành triển khai máy chủ trong frontmatter `.astro` của bạn và thành triển khai máy khách (được hỗ trợ bởi `vanilla-intlayer`) trong các khối `<script>`.
 
 - **solid-js**
   Gói Solid cốt lõi.
@@ -164,6 +167,31 @@ bun add intlayer astro-intlayer solid-js solid-intlayer @astrojs/solid-js
 </Step>
 <Step number={2} title="Cấu hình dự án của bạn">
 
+### Kiến trúc
+
+Trong kiến trúc này, tích hợp `intlayer()` được đăng ký trong `astro.config.ts` sẽ xây dựng các từ điển của bạn và thêm một middleware giúp xử lý locale của mỗi yêu cầu và hiển thị nó trên `Astro.locals.intlayer`. Các trang nằm dưới phân đoạn rest `src/pages/[...locale]/`, do đó locale mặc định được phân phối mà không có tiền tố và mọi locale khác đều có URL riêng biệt. Các tệp `.astro` đọc nội dung bằng các hook `useIntlayer` / `useLocale` của `astro-intlayer` để render phía máy chủ, và đảo Solid (`src/components/solid/SolidIsland.tsx`) nhận locale do máy chủ phát hiện dưới dạng prop và chuyển nó tới `solid-intlayer` cho phần tương tác. Các khai báo nội dung được đặt cùng với các component của bạn trong `src/`.
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── solid
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── SolidIsland.tsx       # Solid island wrapping the tree in IntlayerProvider
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and solid() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Cấu hình
+
 Tạo một file cấu hình để xác định các ngôn ngữ của ứng dụng:
 
 ```typescript fileName="intlayer.config.ts"
@@ -239,19 +267,21 @@ export default appContent;
 </Step>
 <Step number={5} title="Sử dụng nội dung trong Astro">
 
-Bạn có thể sử dụng các từ điển trực tiếp trong các file `.astro` bằng cách sử dụng các hàm hỗ trợ cốt lõi được xuất từ `intlayer`. Bạn cũng nên thêm metadata cho SEO (như hreflang và liên kết canonical) vào mỗi trang và giới thiệu một Solid island cho nội dung tương tác phía client.
+Sử dụng từ điển của bạn trong các tệp `.astro` với các hook được xuất bởi `astro-intlayer`. Chúng chia sẻ chữ ký của `react-intlayer`: `useIntlayer("key")` trả về nội dung của từ điển và `useLocale()` trả về ngôn ngữ hiện tại mà không cần truyền tham số.
+
+Ngôn ngữ đến từ middleware `astro-intlayer`, mà tích hợp tự động đăng ký trước `src/middleware.ts` của riêng bạn. Nó phân giải ngôn ngữ cho mỗi yêu cầu, từ tiền tố URL, sau đó đến ngôn ngữ được lưu trữ bởi máy khách (cookie hoặc tiêu đề), sau đó đến `Accept-Language`, và lưu trữ trong `Astro.locals.intlayer`. Các trang được kết xuất trước chỉ sử dụng URL vì chúng được kết xuất một lần cho mọi khách truy cập.
+
+Bạn cũng nên thêm metadata cho SEO (như hreflang và liên kết canonical) vào mỗi trang và giới thiệu một Solid island cho nội dung tương tác phía client.
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
-  getHTMLTextDir,
   getPrefix,
   localeMap,
   defaultLocale,
-  type LocalesValues,
+  getHTMLTextDir,
 } from "intlayer";
 import { SolidIsland } from "../../components/solid/SolidIsland";
 
@@ -261,8 +291,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { title } = getIntlayer("app", locale);
+// Ngôn ngữ được phân giải bởi middleware (ví dụ /vi/about -> 'vi')
+const { locale } = useLocale();
+
+// Nội dung của từ điển 'app' cho ngôn ngữ đó
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -318,6 +351,8 @@ const { title } = getIntlayer("app", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` cũng hiển thị `locale`, `defaultLocale` và `availableLocales` cho middleware và điểm cuối của riêng bạn. Truyền ngôn ngữ hoặc bộ chọn làm đối số thứ hai (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) để ghi đè ngôn ngữ yêu cầu cho một lệnh gọi.
+
 > **Lưu ý về thiết lập định tuyến:**
 > Cấu trúc thư mục bạn sử dụng phụ thuộc vào cài đặt `middleware.routing` trong `intlayer.config.ts`:
 >
@@ -434,10 +469,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -537,21 +572,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Trình biên dịch Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Cập nhật `vite.config.ts` của bạn để bao gồm plugin `intlayerCompiler`:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+Build ứng dụng của bạn để chuyển đổi các thành phần và trích xuất nội dung
 
 ```bash packageManager="npm"
 npm run build # Hoặc npm run dev

package/docs/vi/intlayer_with_astro_svelte.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-06-23
+updatedAt: 2026-09-21
 title: "Astro + Svelte i18n - Hướng dẫn đầy đủ để dịch ứng dụng của bạn"
 description: "Không còn i18next nữa. Hướng dẫn 2026 để xây dựng ứng dụng Astro + Svelte đa ngôn ngữ (i18n). Dịch với các AI agent và tối ưu hóa kích thước bundle, SEO và hiệu suất."
 keywords:
@@ -19,6 +19,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Sử dụng các hook useIntlayer / useLocale của astro-intlayer trong trang Astro"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Cập nhật cách sử dụng API useIntlayer của Solid sang truy cập thuộc tính trực tiếp"
@@ -150,7 +153,7 @@ bun add intlayer astro-intlayer svelte svelte-intlayer @astrojs/svelte
   Gói cốt lõi cung cấp các công cụ i18n để quản lý cấu hình, bản dịch, [khai báo nội dung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/content_file.md), chuyển mã và [các lệnh CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/cli/index.md).
 
 - **astro-intlayer**
-  Plugin tích hợp Astro để kết nối Intlayer với [trình đóng gói Vite](https://vite.dev/guide/why.html#why-bundle-for-production); nó cũng bao gồm middleware để phát hiện ngôn ngữ ưa thích của người dùng, quản lý cookie và xử lý chuyển hướng URL.
+  Bao gồm plugin tích hợp Astro để tích hợp Intlayer với [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), một middleware phân giải ngôn ngữ của mỗi yêu cầu vào `Astro.locals.intlayer`, và các hook `useIntlayer` / `useDictionary` / `useLocale`. Cùng một đường dẫn import sẽ phân giải thành triển khai máy chủ trong frontmatter `.astro` của bạn và thành triển khai máy khách (được hỗ trợ bởi `vanilla-intlayer`) trong các khối `<script>`.
 
 - **svelte**
   Gói Svelte cốt lõi.
@@ -164,6 +167,30 @@ bun add intlayer astro-intlayer svelte svelte-intlayer @astrojs/svelte
 </Step>
 <Step number={2} title="Cấu hình dự án của bạn">
 
+### Kiến trúc
+
+Trong kiến trúc này, tích hợp `intlayer()` được đăng ký trong `astro.config.ts` sẽ xây dựng các từ điển của bạn và thêm một middleware giúp xử lý locale của mỗi yêu cầu và hiển thị nó trên `Astro.locals.intlayer`. Các trang nằm dưới phân đoạn rest `src/pages/[...locale]/`, do đó locale mặc định được phân phối mà không có tiền tố và mọi locale khác đều có URL riêng biệt. Các tệp `.astro` đọc nội dung bằng các hook `useIntlayer` / `useLocale` của `astro-intlayer` để render phía máy chủ, và đảo Svelte (`src/components/svelte/SvelteIsland.svelte`) nhận locale do máy chủ phát hiện dưới dạng prop và chuyển nó tới `svelte-intlayer` cho phần tương tác. Các khai báo nội dung được đặt cùng với các component của bạn trong `src/`.
+
+```bash
+.
+├── src
+│   ├── app.content.ts                # App content declaration
+│   ├── components
+│   │   └── svelte
+│   │       └── SvelteIsland.svelte   # Svelte island (content + locale switcher)
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and svelte() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Cấu hình
+
 Tạo một file cấu hình để xác định các ngôn ngữ của ứng dụng:
 
 ```typescript fileName="intlayer.config.ts"
@@ -239,19 +266,21 @@ export default appContent;
 </Step>
 <Step number={5} title="Sử dụng nội dung trong Astro">
 
-Bạn có thể sử dụng các từ điển trực tiếp trong các file `.astro` bằng cách sử dụng các hàm hỗ trợ cốt lõi được xuất từ `intlayer`. Bạn cũng nên thêm metadata cho SEO (như hreflang và liên kết canonical) vào mỗi trang và giới thiệu một Svelte island cho nội dung tương tác phía client.
+Sử dụng từ điển của bạn trong các tệp `.astro` với các hook được xuất bởi `astro-intlayer`. Chúng chia sẻ chữ ký của `react-intlayer`: `useIntlayer("key")` trả về nội dung của từ điển và `useLocale()` trả về ngôn ngữ hiện tại mà không cần truyền tham số.
+
+Ngôn ngữ đến từ middleware `astro-intlayer`, mà tích hợp tự động đăng ký trước `src/middleware.ts` của riêng bạn. Nó phân giải ngôn ngữ cho mỗi yêu cầu, từ tiền tố URL, sau đó đến ngôn ngữ được lưu trữ bởi máy khách (cookie hoặc tiêu đề), sau đó đến `Accept-Language`, và lưu trữ trong `Astro.locals.intlayer`. Các trang được kết xuất trước chỉ sử dụng URL vì chúng được kết xuất một lần cho mọi khách truy cập.
+
+Bạn cũng nên thêm metadata cho SEO (như hreflang và liên kết canonical) vào mỗi trang và giới thiệu một Svelte island cho nội dung tương tác phía client.
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
-  getHTMLTextDir,
   getPrefix,
   localeMap,
   defaultLocale,
-  type LocalesValues,
+  getHTMLTextDir,
 } from "intlayer";
 import SvelteIsland from "../../components/svelte/SvelteIsland.svelte";
 
@@ -261,8 +290,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { title } = getIntlayer("app", locale);
+// Ngôn ngữ được phân giải bởi middleware (ví dụ /vi/about -> 'vi')
+const { locale } = useLocale();
+
+// Nội dung của từ điển 'app' cho ngôn ngữ đó
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -318,6 +350,8 @@ const { title } = getIntlayer("app", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` cũng hiển thị `locale`, `defaultLocale` và `availableLocales` cho middleware và điểm cuối của riêng bạn. Truyền ngôn ngữ hoặc bộ chọn làm đối số thứ hai (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) để ghi đè ngôn ngữ yêu cầu cho một lệnh gọi.
+
 > **Lưu ý về thiết lập định tuyến:**
 > Cấu trúc thư mục bạn sử dụng phụ thuộc vào cài đặt `middleware.routing` trong `intlayer.config.ts`:
 >
@@ -438,10 +472,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -541,21 +575,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Trình biên dịch Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Cập nhật `vite.config.ts` của bạn để bao gồm plugin `intlayerCompiler`:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+Build ứng dụng của bạn để chuyển đổi các thành phần và trích xuất nội dung
 
 ```bash packageManager="npm"
 npm run build # Hoặc npm run dev

package/docs/vi/intlayer_with_astro_vue.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-06-23
+updatedAt: 2026-09-21
 title: "Astro + Vue i18n - Hướng dẫn đầy đủ để dịch ứng dụng của bạn"
 description: "Không còn i18next nữa. Hướng dẫn 2026 để xây dựng ứng dụng Astro + Vue đa ngôn ngữ (i18n). Dịch với các AI agent và tối ưu hóa kích thước bundle, SEO và hiệu suất."
 keywords:
@@ -19,6 +19,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Sử dụng các hook useIntlayer / useLocale của astro-intlayer trong trang Astro"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Cập nhật cách sử dụng API useIntlayer của Solid sang truy cập thuộc tính trực tiếp"
@@ -150,7 +153,7 @@ bun add intlayer astro-intlayer vue vue-intlayer @astrojs/vue
   Gói cốt lõi cung cấp các công cụ i18n để quản lý cấu hình, bản dịch, [khai báo nội dung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/content_file.md), chuyển mã và [các lệnh CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/cli/index.md).
 
 - **astro-intlayer**
-  Plugin tích hợp Astro để kết nối Intlayer với [trình đóng gói Vite](https://vite.dev/guide/why.html#why-bundle-for-production); nó cũng bao gồm middleware để phát hiện ngôn ngữ ưa thích của người dùng, quản lý cookie và xử lý chuyển hướng URL.
+  Bao gồm plugin tích hợp Astro để tích hợp Intlayer với [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), một middleware phân giải ngôn ngữ của mỗi yêu cầu vào `Astro.locals.intlayer`, và các hook `useIntlayer` / `useDictionary` / `useLocale`. Cùng một đường dẫn import sẽ phân giải thành triển khai máy chủ trong frontmatter `.astro` của bạn và thành triển khai máy khách (được hỗ trợ bởi `vanilla-intlayer`) trong các khối `<script>`.
 
 - **vue**
   Gói Vue cốt lõi.
@@ -164,6 +167,30 @@ bun add intlayer astro-intlayer vue vue-intlayer @astrojs/vue
 </Step>
 <Step number={2} title="Cấu hình dự án của bạn">
 
+### Kiến trúc
+
+Trong kiến trúc này, tích hợp `intlayer()` được đăng ký trong `astro.config.ts` sẽ xây dựng các từ điển của bạn và thêm một middleware giúp xử lý locale của mỗi yêu cầu và hiển thị nó trên `Astro.locals.intlayer`. Các trang nằm dưới phân đoạn rest `src/pages/[...locale]/`, do đó locale mặc định được phân phối mà không có tiền tố và mọi locale khác đều có URL riêng biệt. Các tệp `.astro` đọc nội dung bằng các hook `useIntlayer` / `useLocale` của `astro-intlayer` để render phía máy chủ, và đảo Vue (`src/components/vue/VueIsland.vue`) nhận locale do máy chủ phát hiện dưới dạng prop và chuyển nó tới `vue-intlayer` cho phần tương tác. Các khai báo nội dung được đặt cùng với các component của bạn trong `src/`.
+
+```bash
+.
+├── src
+│   ├── app.content.ts                # App content declaration
+│   ├── components
+│   │   └── vue
+│   │       └── VueIsland.vue         # Vue island (content + locale switcher)
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and vue() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Cấu hình
+
 Tạo một file cấu hình để xác định các ngôn ngữ của ứng dụng:
 
 ```typescript fileName="intlayer.config.ts"
@@ -239,19 +266,21 @@ export default appContent;
 </Step>
 <Step number={5} title="Sử dụng nội dung trong Astro">
 
-Bạn có thể sử dụng các từ điển trực tiếp trong các file `.astro` bằng cách sử dụng các hàm hỗ trợ cốt lõi được xuất từ `intlayer`. Bạn cũng nên thêm metadata cho SEO (như hreflang và liên kết canonical) vào mỗi trang và giới thiệu một Vue island cho nội dung tương tác phía client.
+Sử dụng từ điển của bạn trong các tệp `.astro` với các hook được xuất bởi `astro-intlayer`. Chúng chia sẻ chữ ký của `react-intlayer`: `useIntlayer("key")` trả về nội dung của từ điển và `useLocale()` trả về ngôn ngữ hiện tại mà không cần truyền tham số.
+
+Ngôn ngữ đến từ middleware `astro-intlayer`, mà tích hợp tự động đăng ký trước `src/middleware.ts` của riêng bạn. Nó phân giải ngôn ngữ cho mỗi yêu cầu, từ tiền tố URL, sau đó đến ngôn ngữ được lưu trữ bởi máy khách (cookie hoặc tiêu đề), sau đó đến `Accept-Language`, và lưu trữ trong `Astro.locals.intlayer`. Các trang được kết xuất trước chỉ sử dụng URL vì chúng được kết xuất một lần cho mọi khách truy cập.
+
+Bạn cũng nên thêm metadata cho SEO (như hreflang và liên kết canonical) vào mỗi trang và giới thiệu một Vue island cho nội dung tương tác phía client.
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
-  getHTMLTextDir,
   getPrefix,
   localeMap,
   defaultLocale,
-  type LocalesValues,
+  getHTMLTextDir,
 } from "intlayer";
 import VueIsland from "../../components/vue/VueIsland.vue";
 
@@ -261,8 +290,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { title } = getIntlayer("app", locale);
+// Ngôn ngữ được phân giải bởi middleware (ví dụ /vi/about -> 'vi')
+const { locale } = useLocale();
+
+// Nội dung của từ điển 'app' cho ngôn ngữ đó
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -310,6 +342,8 @@ const { title } = getIntlayer("app", locale);
 </html>
 ```
 
+> `Astro.locals.intlayer` cũng hiển thị `locale`, `defaultLocale` và `availableLocales` cho middleware và điểm cuối của riêng bạn. Truyền ngôn ngữ hoặc bộ chọn làm đối số thứ hai (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) để ghi đè ngôn ngữ yêu cầu cho một lệnh gọi.
+
 > **Lưu ý về thiết lập định tuyến:**
 > Cấu trúc thư mục bạn sử dụng phụ thuộc vào cài đặt `middleware.routing` trong `intlayer.config.ts`:
 >
@@ -448,10 +482,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -551,21 +585,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Trình biên dịch Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Cập nhật `vite.config.ts` của bạn để bao gồm plugin `intlayerCompiler`:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+Build ứng dụng của bạn để chuyển đổi các thành phần và trích xuất nội dung
 
 ```bash packageManager="npm"
 npm run build # Hoặc npm run dev

package/docs/vi/intlayer_with_react_router_v7.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-04
-updatedAt: 2026-09-06
+updatedAt: 2026-09-20
 title: "React Router v7 i18n - Hướng dẫn đầy đủ để dịch ứng dụng của bạn"
 description: "Không còn i18next nữa. Hướng dẫn 2026 để xây dựng ứng dụng React Router v7 đa ngôn ngữ (i18n). Dịch với các AI agent và tối ưu hóa kích thước bundle, SEO và hiệu suất."
 keywords:
@@ -889,8 +889,14 @@ bun x intlayer extract
  </Tab>
  <Tab value='Trình biên dịch Babel'>
 
+ <Tabs>
+ <Tab value='intlayer >= 9'>
+
 > Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
 
+ </Tab>
+ <Tab value='intlayer < 9'>
+
 Cập nhật `vite.config.ts` của bạn để bao gồm plugin `intlayerCompiler`:
 
 ```ts fileName="vite.config.ts"
@@ -905,6 +911,11 @@ export default defineConfig({
 });
 ```
 
+ </Tab>
+ </Tabs>
+
+Build ứng dụng của bạn để chuyển đổi các thành phần và trích xuất nội dung
+
 ```bash packageManager="npm"
 npm run build # Hoặc npm run dev
 ```

package/docs/vi/intlayer_with_remix_3.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-09-09
-updatedAt: 2026-09-19
+updatedAt: 2026-09-21
 title: "Remix 3 i18n - Hướng dẫn đầy đủ để dịch ứng dụng của bạn"
 description: "Không còn cần đến i18next. Hướng dẫn năm 2026 để xây dựng ứng dụng Remix 3 đa ngôn ngữ (i18n). Dịch bằng các tác tử AI và tối ưu hóa kích thước gói bundle, SEO và hiệu năng."
 keywords:
@@ -137,6 +137,27 @@ bun add intlayer remix-intlayer remix@next
 </Step>
 <Step number={2} title="Cấu hình Intlayer">
 
+### Kiến trúc
+
+Trong kiến trúc này, middleware `intlayer()` của `remix-intlayer` được đăng ký trong `createRouter()` trước middleware `render()`. Nó loại bỏ tiền tố locale trước khi router khớp, do đó các route chỉ được khai báo một lần trong `src/routes.ts` mà không có phân đoạn `:locale`, đồng thời chạy phần còn lại của yêu cầu bên trong phạm vi `AsyncLocalStorage`, cho phép `useIntlayer` / `useLocale` đọc locale mà không cần đối số trong các trình xử lý route và view `remix/ui`. Các khai báo nội dung được đặt cùng với các view của bạn trong `src/`:
+
+```bash
+.
+├── src
+│   ├── home.content.ts               # Home page content declaration
+│   ├── router.tsx                    # createRouter() with the intlayer() and render() middleware
+│   ├── routes.ts                     # Type-safe routes, declared once without locale segment
+│   ├── server.ts                     # fetch handler (Node.js, Bun, Deno, Cloudflare Workers)
+│   └── views
+│       ├── document.tsx              # HTML shell setting <html lang dir> from the locale
+│       └── home.tsx                  # Localized page using useIntlayer / useLocale
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Cấu hình
+
 Tạo tệp `intlayer.config.ts` trong thư mục gốc của dự án để khai báo các ngôn ngữ được hỗ trợ và cài đặt quốc tế hóa:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/vi/intlayer_with_solid_start.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-08-06
-updatedAt: 2026-08-06
+updatedAt: 2026-09-20
 title: "Solid Start i18n - Hướng dẫn đầy đủ để dịch ứng dụng của bạn"
 description: "Không còn i18next nữa. Hướng dẫn 2026 để xây dựng ứng dụng SolidStart đa ngôn ngữ (i18n). Định tuyến locale được render trên server, hreflang, sitemap và dịch thuật với sự hỗ trợ của AI."
 keywords:
@@ -748,15 +748,13 @@ SolidStart chuyển đổi một tệp xuất ra phương thức HTTP thành m
 import type { APIEvent } from "@solidjs/start/server";
 import { generateSitemap } from "intlayer";
 
-const SITE_URL = process.env.SITE_URL ?? "http://localhost:3000";
-
 export const GET = (_event: APIEvent) => {
   const sitemap = generateSitemap(
     [
       { path: "/", changefreq: "daily", priority: 1.0 },
       { path: "/about", changefreq: "monthly", priority: 0.8 },
     ],
-    { siteUrl: SITE_URL }
+    { siteUrl: "https://example.com" }
   );
 
   return new Response(sitemap, {
@@ -790,8 +788,6 @@ Bạn có thể xây dựng `robots.txt` theo cách tương tự với `getMulti
 ```typescript fileName="src/routes/robots.txt.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { getMultilingualUrls } from "intlayer";
 
-const SITE_URL = process.env.SITE_URL ?? "http://localhost:3000";
-
 const disallowedPaths = ["/admin", "/private"].flatMap((path) =>
   Object.values(getMultilingualUrls(path))
 );
@@ -803,7 +799,7 @@ export const GET = () =>
       "Allow: /",
       ...disallowedPaths.map((path) => `Disallow: ${path}`),
       "",
-      `Sitemap: ${SITE_URL}/sitemap.xml`,
+      `Sitemap: https://example.com/sitemap.xml`,
     ].join("\n"),
     { headers: { "Content-Type": "text/plain" } }
   );
@@ -922,8 +918,14 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel compiler'>
 
+ <Tabs>
+ <Tab value='intlayer >= 9'>
+
 > Kể từ v9, `intlayerCompiler` được bao gồm trong plugin `intlayer`. Vì vậy bạn không cần thêm nó thủ công.
 
+ </Tab>
+ <Tab value='intlayer < 9'>
+
 Cập nhật `vite.config.ts` của bạn để bao gồm plugin `intlayerCompiler`:
 
 ```ts fileName="vite.config.ts"
@@ -942,6 +944,11 @@ export default defineConfig({
 });
 ```
 
+ </Tab>
+ </Tabs>
+
+Build ứng dụng của bạn để chuyển đổi các thành phần và trích xuất nội dung
+
 ```bash packageManager="npm"
 npm run build # Hoặc npm run dev
 ```

package/docs/vi/intlayer_with_svelte_kit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-11-20
-updatedAt: 2026-06-23
+updatedAt: 2026-09-20
 title: "SvelteKit i18n - Hướng dẫn đầy đủ để dịch ứng dụng của bạn"
 description: "Không còn i18next nữa. Hướng dẫn 2026 để xây dựng ứng dụng SvelteKit đa ngôn ngữ (i18n). Dịch với các AI agent và tối ưu hóa kích thước bundle, SEO và hiệu suất."
 keywords:
@@ -707,8 +707,14 @@ bun x intlayer extract
  </Tab>
  <Tab value='Trình biên dịch Babel'>
 
+ <Tabs>
+ <Tab value='intlayer >= 9'>
+
 > Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
 
+ </Tab>
+ <Tab value='intlayer < 9'>
+
 Cập nhật `vite.config.ts` của bạn để bao gồm plugin `intlayerCompiler`:
 
 ```ts fileName="vite.config.ts"
@@ -723,6 +729,11 @@ export default defineConfig({
 });
 ```
 
+ </Tab>
+ </Tabs>
+
+Build ứng dụng của bạn để chuyển đổi các thành phần và trích xuất nội dung
+
 ```bash packageManager="npm"
 npm run build # Hoặc npm run dev
 ```

package/docs/vi/intlayer_with_tanstack+solid.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-08-25
+updatedAt: 2026-09-20
 title: "TanStack Start + Solid i18n - Hướng dẫn đầy đủ để dịch ứng dụng của bạn"
 description: "Không còn i18next nữa. Hướng dẫn 2026 để xây dựng ứng dụng TanStack Start + Solid đa ngôn ngữ (i18n). Dịch với các AI agent và tối ưu hóa kích thước bundle, SEO và hiệu suất."
 keywords:
@@ -986,8 +986,14 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel compiler'>
 
+ <Tabs>
+ <Tab value='intlayer >= 9'>
+
 > Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
 
+ </Tab>
+ <Tab value='intlayer < 9'>
+
 Cập nhật `vite.config.ts` của bạn để bao gồm plugin `intlayerCompiler`:
 
 ```ts fileName="vite.config.ts"
@@ -1013,6 +1019,11 @@ export default defineConfig({
 });
 ```
 
+ </Tab>
+ </Tabs>
+
+Build ứng dụng của bạn để chuyển đổi các thành phần và trích xuất nội dung
+
 ```bash packageManager="npm"
 npm run build # Hoặc npm run dev
 ```
@@ -1092,7 +1103,7 @@ export const Route = createFileRoute("/sitemap.xml")({
             { path: "/", changefreq: "daily", priority: 1.0 },
             { path: "/about", changefreq: "monthly", priority: 0.8 },
           ],
-          { siteUrl: SITE_URL }
+          { siteUrl: "https://example.com" }
         );
 
         return new Response(sitemap, {