@intlayer/docs 9.3.3 → 9.4.0

package/docs/en-GB/intlayer_with_vite+vue.md

@@ -62,7 +62,7 @@ Scoping your application's content **facilitates maintenance** for large-scale a
 
 <Accordion header="AI Agent">
 
-Co-locating content **reduces the context needed** by Large Language Models (LLMs). Intlayer also comes with a suite of tools, such as a **CLI** to test for missing translations,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, and **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, to make the developer experience (DX) even smoother for AI agents.
+Co-locating content **reduces the context needed** by Large Language Models (LLMs). Intlayer also comes with a suite of tools, such as a **CLI** to test for missing translations,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, and **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/agent_skills.md)**, to make the developer experience (DX) even smoother for AI agents.
 
 </Accordion>
 
@@ -364,6 +364,13 @@ app.use(intlayer);
 app.mount("#app");
 ```
 
+> You can also call `installIntlayer(app)` directly as a function if you prefer:
+>
+> ```javascript
+> import { intlayer } from "vue-intlayer";
+> app.use(intlayer);
+> ```
+
 Access your content dictionaries throughout your application by creating a main Vue component and using the `useIntlayer` composables:
 
 ```vue fileName="src/HelloWord.vue"
@@ -417,6 +424,8 @@ const countRef = ref(0);
 </template>
 ```
 
+> If your app already exists, you can use the [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/compiler.md), as well as the [extract command](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/cli/extract.md), to transform thousands of components in a second.
+
 #### Accessing Content in Intlayer
 
 Intlayer offers different APIs to access your content:
@@ -622,26 +631,6 @@ import LocaleSwitcher from "@components/LocaleSwitcher.vue";
 
 In parallel, you can also use the `intlayerProxy` to add server-side routing to your application. This plugin will automatically detect the current locale based on the URL and set the appropriate locale cookie. If no locale is specified, the plugin will determine the most appropriate locale based on the user's browser language preferences. If no locale is detected, it will redirect to the default locale.
 
-```typescript {3,7} fileName="vite.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
-import { intlayer } from "vite-intlayer";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    vue(),
-    intlayer({
-      proxy: {
-        ignore: (req) => req.url?.startsWith("/api"),
-      },
-    }),
-  ],
-});
-```
-
-</Step>
-
 <Step number={8} title="Change the URL when the locale changes" isOptional={true}>
 
 To automatically update the URL when the user changes the language, you can modify the `LocaleSwitcher` component to use Vue Router:
@@ -801,27 +790,160 @@ export const useI18nHTMLAttributes = () => {
       // Update the language attribute
       document.documentElement.lang = newLocale;
 
+To ensure that your application's navigation respects the current locale, you can create a custom `Link` component. This component automatically prefixes internal URLs with the current language, so that. For example, when a French-speaking user clicks on a link to the "About" page, they are redirected to `/fr/about` instead of `/about`.
+
+This behaviour is useful for several reasons:
+
       // Set the text direction (ltr for most languages, rtl for Arabic, Hebrew, etc.)
       document.documentElement.dir = getHTMLTextDir(newLocale);
     },
     { immediate: true }
   );
 };
+
+```vue fileName="src/components/Link.vue"
+<script setup lang="ts">
+import { getLocalizedUrl } from "intlayer";
+import { computed } from "vue";
+import { useLocale } from "vue-intlayer";
+
+const props = defineProps({
+  href: {
+    type: String,
+    required: true,
+  },
+});
+
+const { locale } = useLocale();
+
+// Check if the link is external
+const isExternalLink = computed(() => /^https?:\/\//.test(props.href || ""));
+
+// Create a localised href for internal links
+const localizedHref = computed(() =>
+  isExternalLink.value ? props.href : getLocalizedUrl(props.href, locale.value)
+);
+</script>
+
+<template>
+  <a :href="localizedHref" v-bind="$attrs">
+    <slot />
+  </a>
+</template>
+```
+
+For use with Vue Router, create a router-specific version:
+
+```vue fileName="src/components/RouterLink.vue"
+<script setup lang="ts">
+import { getLocalizedUrl } from "intlayer";
+import { computed } from "vue";
+import { useLocale } from "vue-intlayer";
+
+const props = defineProps({
+  to: {
+    type: [String, Object],
+    required: true,
+  },
+});
+
+const { locale } = useLocale();
+
+// Create localised to-prop for router-link
+const localizedTo = computed(() => {
+  if (typeof props.to === "string") {
+    return getLocalizedUrl(props.to, locale.value);
+  } else {
+    // If 'to' is an object, localise the path property
+    return {
+      ...props.to,
+      path: getLocalizedUrl(props.to.path ?? "/", locale.value),
+    };
+  }
+});
+</script>
+
+<template>
+  <router-link :to="localizedTo" v-bind="$attrs">
+    <slot />
+  </router-link>
+</template>
+```
+
+Use these components in your application:
+
 ````
 
 Use this composable in your `App.vue` or a global component:
 
-```vue fileName="src/App.vue"
+````vue fileName="src/App.vue"
+
+</Step>
+
 <script setup lang="ts">
 import { useI18nHTMLAttributes } from "@composables/useI18nHTMLAttributes";
 
+If you have an existing codebase, transforming thousands of files can be time-consuming.
+
+To ease this process, Intlayer propose a [compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/compiler.md) / [extractor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/cli/extract.md) to transform your components and extract the content.
+
 // Apply the HTML attributes based on the current locale
 useI18nHTMLAttributes();
 </script>
 
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... Rest of your config
+  compiler: {
+    /**
+     * Indicates if the compiler should be enabled.
+     */
+    enabled: true,
+
+    /**
+     * Defines the output files path
+     */
+    output: ({ fileName, extension }) => `./${fileName}${extension}`,
+
+    /**
+     * Indicates if the components should be saved after being transformed.
+     *
+     * - If `true`, the compiler will rewrite the component file in the disk. So the transformation will be permanent, and the compiler will skip the transformation for the next process. That way, the compiler can transform the app, and then it can be removed.
+     *
+     * - If `false`, the compiler will inject the `useIntlayer()` function call into the code in the build output only, and keep the base codebase intact. The transformation will be done only in memory.
+     */
+    saveComponents: false,
+
+    /**
+     * Dictionary key prefix
+     */
+    dictionaryKeyPrefix: "",
+  },
+};
+
+export default config;
+````
+
 <template>
   <!-- Your app template -->
 </template>
+
+Run the extractor to transform your components and extract the content
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn intlayer extract
+```
+
 ```
 
 </Step>
@@ -835,7 +957,12 @@ useI18nHTMLAttributes();
 );
 };
 
-````
+```
+
+ </Tab>
+ <Tab value='Babel compiler'>
+
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
 
 Use this composable in your `App.vue` or a global component:
 
@@ -850,7 +977,23 @@ useI18nHTMLAttributes();
 <template>
   <!-- Your app template -->
 </template>
-````
+```
+
+```bash packageManager="npm"
+npm run build # Or npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # Or pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # Or yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # Or bun run dev
+```
 
 </Step>
 
@@ -981,3 +1124,5 @@ For more details on how to use the extension, refer to the [Intlayer VS Code Ext
 ### Go Further
 
 To go further, you can implement the [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_visual_editor.md) or externalise your content using the [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_CMS.md).
+
+---

package/docs/en-GB/live-sync.md

@@ -41,8 +41,6 @@ Live Sync allows your app to reflect CMS content changes at runtime. No rebuild
 
 ## Enabling Live Sync
 
-> Live Sync requires a continuous server connection and is available on the enterprise plan.
-
 Enable Live Sync by updating your Intlayer configuration:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
@@ -84,6 +82,19 @@ export default config;
 
 Start the Live Sync server to wrap your application:
 
+Example using standalone server:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... other scripts
+    "live:start": "npx intlayer live",
+  },
+}
+```
+
+You can also use your application server in parallel using the `--process` argument.
+
 Example using Next.js:
 
 ```json5 fileName="package.json"

package/docs/en-GB/mcp_server.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-06-07
-updatedAt: 2026-03-03
+updatedAt: 2026-08-21
 title: MCP Server Documentation
 description: Explore the features and setup of the MCP Server to optimise your server management and operations.
 keywords:
@@ -15,6 +15,9 @@ slugs:
   - doc
   - mcp-server
 history:
+  - version: 9.3.3
+    date: 2026-08-21
+    changes: "Group the platform setup sections into tabs"
   - version: 5.5.12
     date: 2025-07-11
     changes: "Add set up of ChatGPT"
@@ -113,13 +116,18 @@ This command will:
 
 ---
 
-## Setup in Cursor
+## Manual setup
+
+<Tabs defaultTab="cursor">
+  <Tab label="Cursor" value="cursor">
+
+### Setup in Cursor
 
 Follow the [official documentation](https://docs.cursor.com/context/mcp) to configure the MCP server in Cursor.
 
 In your project root, add the following `.cursor/mcp.json` configuration file:
 
-### Local server (stdio) (recommended)
+#### Local server (stdio) (recommended)
 
 ```json fileName=".cursor/mcp.json"
 {
@@ -132,7 +140,7 @@ In your project root, add the following `.cursor/mcp.json` configuration file:
 }
 ```
 
-### Remote server (Streamable HTTP)
+#### Remote server (Streamable HTTP)
 
 For connecting to a remote Intlayer MCP server using Server-Sent Events (Streamable HTTP), you can configure your MCP client to connect to the hosted service.
 
@@ -149,15 +157,16 @@ For connecting to a remote Intlayer MCP server using Server-Sent Events (Streama
 
 This instructs your IDE to launch the Intlayer MCP server using `npx`, ensuring it always uses the latest available version unless you pin it.
 
----
+  </Tab>
+  <Tab label="VS Code" value="vscode">
 
-## Setup in VS Code
+### Setup in VS Code
 
 Follow the [official documentation](https://code.visualstudio.com/docs/copilot/chat/mcp-servers) to configure the MCP server in VS Code.
 
 To use the Intlayer MCP Server with VS Code, you need to configure it in your workspace or user settings.
 
-### Local server (stdio) (recommended)
+#### Local server (stdio) (recommended)
 
 Create a `.vscode/mcp.json` file in your project root:
 
@@ -173,7 +182,7 @@ Create a `.vscode/mcp.json` file in your project root:
 }
 ```
 
-### Remote server (Streamable HTTP)
+#### Remote server (Streamable HTTP)
 
 For connecting to a remote Intlayer MCP server using Server-Sent Events (Streamable HTTP), you can configure your MCP client to connect to the hosted service.
 
@@ -188,11 +197,12 @@ For connecting to a remote Intlayer MCP server using Server-Sent Events (Streama
 }
 ```
 
----
+  </Tab>
+  <Tab label="ChatGPT" value="chatgpt">
 
-## Set Up in ChatGPT
+### Set Up in ChatGPT
 
-### Remote server (Streamable HTTP)
+#### Remote server (Streamable HTTP)
 
 Follow the [official documentation](https://platform.openai.com/docs/mcp#test-and-connect-your-mcp-server) to configure the MCP server in ChatGPT.
 
@@ -209,9 +219,10 @@ Follow the [official documentation](https://platform.openai.com/docs/mcp#test-an
 
 7. Click on `Save`
 
----
+  </Tab>
+  <Tab label="Claude Desktop" value="claude-desktop">
 
-## Set Up in Claude Desktop
+### Set Up in Claude Desktop
 
 Follow the [official documentation](https://modelcontextprotocol.io/quickstart/user#2-add-the-filesystem-mcp-server) to configure the MCP server in Claude Desktop.
 
@@ -220,7 +231,7 @@ Path of the config file:
 - macOS: `~/Library/Application\ Support/Claude/claude_desktop_config.json`
 - Windows: `%APPDATA%\Claude\claude_desktop_config.json`
 
-### Local server (stdio) (recommended)
+#### Local server (stdio) (recommended)
 
 ```json fileName="claude_desktop_config.json"
 {
@@ -233,7 +244,7 @@ Path of the config file:
 }
 ```
 
-### Remote server (Streamable HTTP)
+#### Remote server (Streamable HTTP)
 
 ```json fileName="claude_desktop_config.json"
 {
@@ -246,13 +257,14 @@ Path of the config file:
 }
 ```
 
----
+  </Tab>
+  <Tab label="Claude Code (CLI)" value="claude-code">
 
-## Set Up in Claude Code (CLI)
+### Set Up in Claude Code (CLI)
 
 Follow the [official documentation](https://modelcontextprotocol.io/quickstart/user) to configure the MCP server in Claude Code.
 
-### Local server (stdio) (recommended)
+#### Local server (stdio) (recommended)
 
 To connect the Intlayer MCP server to Claude Code using stdio:
 
@@ -260,7 +272,7 @@ To connect the Intlayer MCP server to Claude Code using stdio:
 claude mcp add intlayer npx -y @intlayer/mcp
 ```
 
-### Remote server (Streamable HTTP)
+#### Remote server (Streamable HTTP)
 
 To connect the Intlayer MCP server to Claude Code using Streamable HTTP (SSE):
 
@@ -268,6 +280,9 @@ To connect the Intlayer MCP server to Claude Code using Streamable HTTP (SSE):
 claude mcp add intlayer https://mcp.intlayer.org -t http
 ```
 
+  </Tab>
+</Tabs>
+
 ---
 
 ## Using the MCP Server via CLI
@@ -281,5 +296,3 @@ npm install -g @intlayer/mcp
 # Or use directly with npx (recommended)
 npx @intlayer/mcp
 ```
-
----

package/docs/en-GB/packages/elysia-intlayer/exports.md

@@ -0,0 +1,134 @@
+---
+createdAt: 2026-08-24
+updatedAt: 2026-08-24
+title: elysia-intlayer Package Documentation
+description: Elysia plugin for Intlayer, providing translation functions and locale detection.
+keywords:
+  - elysia-intlayer
+  - elysia
+  - plugin
+  - internationalisation
+  - i18n
+slugs:
+  - doc
+  - packages
+  - elysia-intlayer
+  - exports
+history:
+  - version: 9.4.0
+    date: 2026-08-24
+    changes: "Unified documentation for all exports"
+author: aymericzip
+---
+
+# elysia-intlayer Package
+
+The `elysia-intlayer` package provides a plugin for Elysia applications to handle internationalisation. It detects the user's locale and injects an `intlayer` object into the route context.
+
+## Installation
+
+```bash packageManager="npm"
+npm install intlayer elysia-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer elysia-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add intlayer elysia-intlayer
+```
+
+```bash packageManager="bun"
+bun add intlayer elysia-intlayer
+```
+
+> `elysia` is a peer dependency (`>=1.0.0`). Elysia targets the **Bun** runtime.
+
+## Exports
+
+### Plugin
+
+Import:
+
+```ts
+import { intlayer } from "elysia-intlayer";
+```
+
+| Function   | Description                                                                                                                                                                                                                                                                                                                    | Related documentation                                                                                             |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------- |
+| `intlayer` | Elysia plugin that integrates Intlayer into your Elysia application. Handles locale detection from storage (cookies, headers) then from `Accept-Language`, injects an `intlayer` object exposing `locale`, `t`, `getIntlayer` and `getDictionary` into the route context, and sets up the `AsyncLocalStorage` request context. | [intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/elysia-intlayer/intlayer.md) |
+
+### Functions
+
+Import:
+
+```ts
+import { t, getIntlayer, getDictionary } from "elysia-intlayer";
+```
+
+| Function        | Description                                                                                                                                                                                                                                                             | Related documentation                                                                                     |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `t`             | Global translation function that retrieves content for the current locale in Elysia. Uses `AsyncLocalStorage` to access the request context set up by the `intlayer` plugin, and falls back to the default locale outside of it. Can also be accessed via `intlayer.t`. | [translation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/dictionary/translation.md) |
+| `getIntlayer`   | Retrieves a dictionary by its key from the generated declaration and returns its content for the current locale. Optimised version of `getDictionary`. Uses `AsyncLocalStorage` to access the request context. Can also be accessed via `intlayer.getIntlayer`.         | -                                                                                                         |
+| `getDictionary` | Processes dictionary objects and returns content for the current locale. Processes `t()` translations, enumerations, markdown, HTML, etc. Uses `AsyncLocalStorage` to access the request context. Can also be accessed via `intlayer.getDictionary`.                    | -                                                                                                         |
+
+### Types
+
+Import:
+
+```ts
+import type { IntlayerContext, TranslateFunction } from "elysia-intlayer";
+```
+
+| Type                | Description                                                                                                                                                            |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `IntlayerContext`   | Shape of the `intlayer` object injected into every route context: `locale`, `locale_storage`, `locale_detected`, `defaultLocale`, `t`, `getIntlayer`, `getDictionary`. |
+| `TranslateFunction` | Signature of the translation function, translating a locale map into the content matching the current request locale.                                                  |
+
+## Usage
+
+```ts fileName="src/index.ts"
+import { Elysia } from "elysia";
+import { getDictionary, getIntlayer, intlayer, t } from "elysia-intlayer";
+import dictionaryExample from "./index.content";
+
+const app = new Elysia()
+  // Load the internationalisation plugin
+  .use(intlayer())
+  // Read the locale and the helpers from the route context
+  .get("/", ({ intlayer }) => ({
+    locale: intlayer!.locale,
+    greeting: intlayer!.t({
+      en: "Hello",
+      fr: "Bonjour",
+      es: "Hola",
+    }),
+    content: intlayer!.getIntlayer("index").exampleOfContent,
+  }))
+  // Or use the standalone helpers, bound to the current request
+  .get("/t_example", () =>
+    t({
+      en: "Example of returned content in English",
+      fr: "Exemple de contenu renvoyé en français",
+      es: "Ejemplo de contenido devuelto en español",
+    })
+  )
+  .get("/getIntlayer_example", () => getIntlayer("index").exampleOfContent)
+  .get(
+    "/getDictionary_example",
+    () => getDictionary(dictionaryExample).exampleOfContent
+  )
+  .listen(3000);
+
+console.log(
+  `🦊 Elysia is running at ${app.server?.hostname}:${app.server?.port}`
+);
+```
+
+> The plugin registers its context through a **global** `derive`, which Elysia types as `Partial<{ intlayer: IntlayerContext }>`. The value is always present at runtime for routes registered after `.use(intlayer())`, so use the non-null assertion (`intlayer!.locale`) — or optional chaining — to satisfy TypeScript in `strict` mode.
+
+## Related Doc
+
+- [Elysia i18n - Complete guide to translate your app](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_with_elysia.md)
+- [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/configuration.md)