@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/en-GB/lsp.md

@@ -0,0 +1,351 @@
+---
+createdAt: 2025-06-07
+updatedAt: 2026-05-31
+title: Intlayer LSP Server
+description: Learn how the Intlayer Language Server provides Go-to-Definition and other IDE features for useIntlayer, getIntlayer, and related calls across all supported editors.
+keywords:
+  - LSP
+  - Language Server
+  - Go to Definition
+  - IDE
+  - Intlayer
+  - VS Code
+  - Neovim
+  - TypeScript
+slugs:
+  - doc
+  - lsp
+history:
+  - version: 8.12.0
+    date: 2026-06-01
+    changes: "Release LSP"
+---
+
+# Intlayer LSP Server
+
+The **Intlayer Language Server** is a [Language Server Protocol (LSP)](https://microsoft.github.io/language-server-protocol/) implementation that enhances your IDE with Intlayer-aware intelligence. It currently provides **Go to Definition** for dictionary key calls, letting you jump straight from `useIntlayer("my-key")` in your component to the `.content.ts` file that declares it.
+
+---
+
+## Why Use the LSP?
+
+When you use Intlayer, the connection between a call like `useIntlayer("homepage")` and its declaration in `src/homepage.content.ts` is implicit. Without tooling, you must search for the file manually. The LSP makes that link explicit:
+
+**AI agent awareness**
+
+AI coding agents (Cursor, Windsurf, GitHub Copilot, Claude Code, Codex) rely on the language server to resolve symbols and understand cross-file relationships. With the Intlayer LSP running, agents can follow `useIntlayer("key")` back to its declaration, giving them accurate context about available content keys, the shape of each dictionary, and which files to read or edit.
+
+**Jump to Definition**
+
+Place your cursor on any dictionary key string inside a supported getter call and press `F12` (or `Cmd/Ctrl+Click`). The editor opens the content declaration file and positions the cursor on the `key:` line.
+
+**Merged dictionary support**
+
+A key can be split across multiple content files (Intlayer merges them). The server returns one `Location` per source file so you can navigate to every declaration.
+
+**Works everywhere**
+
+Supports all `*-intlayer` packages (`next-intlayer`, `react-intlayer`, `vue-intlayer`, `svelte-intlayer`, `solid-intlayer`, `preact-intlayer`, `angular-intlayer`, `lit-intlayer`, `express-intlayer`, `hono-intlayer`, `fastify-intlayer`, `adonis-intlayer`, `intlayer`).
+
+### Supported getter calls
+
+The server detects the following function calls and extracts the first string-literal argument as the dictionary key:
+
+| Function      | Example                       |
+| ------------- | ----------------------------- |
+| `useIntlayer` | `useIntlayer("hero")`         |
+| `getIntlayer` | `getIntlayer("hero", locale)` |
+
+TypeScript generics and extra arguments are ignored — only the key string matters.
+
+> `useDictionary` and `getDictionary` take an already-imported `Dictionary` object as their first argument rather than a string key, so they do not benefit from Go-to-Definition and are not tracked by the server.
+
+---
+
+## Installation
+
+The LSP server is distributed as part of `@intlayer/lsp`:
+
+```bash packageManager="npm"
+npm install --save-dev @intlayer/lsp
+```
+
+```bash packageManager="yarn"
+yarn add --dev @intlayer/lsp
+```
+
+```bash packageManager="pnpm"
+pnpm add --save-dev @intlayer/lsp
+```
+
+```bash packageManager="bun"
+bun add --dev @intlayer/lsp
+```
+
+The package exposes the `intlayer-lsp` binary, which editors use as the server executable.
+
+---
+
+## Setup as a Claude Code Plugin
+
+The Intlayer LSP is available as a **Claude Code plugin** hosted directly in the Intlayer GitHub repository. Installing it gives Claude Code native Go-to-Definition awareness for all your `useIntlayer` / `getIntlayer` calls.
+
+### 1. Install the language server binary
+
+```bash packageManager="npm"
+npm install -g @intlayer/lsp
+```
+
+```bash packageManager="yarn"
+yarn global add @intlayer/lsp
+```
+
+```bash packageManager="pnpm"
+pnpm add -g @intlayer/lsp
+```
+
+This puts the `intlayer-lsp` binary on your PATH, which is what the plugin's `lspServers` entry invokes.
+
+### 2. Register the Intlayer marketplace and install the plugin
+
+```bash
+claude plugin marketplace add intlayer@github:aymericzip/intlayer
+claude plugin install intlayer-lsp@intlayer
+claude plugin enable intlayer-lsp@intlayer
+```
+
+Claude Code will add `"intlayer-lsp@intlayer": true` to your `enabledPlugins` and automatically start the language server on the supported file types (`.ts`, `.tsx`, `.js`, `.jsx`, `.vue`, `.svelte`).
+
+### 3. Enable the LSP tool (if not already active)
+
+Some Claude Code versions require the LSP feature flag to be set. Add the following to your `~/.claude/settings.json` if Go-to-Definition isn't working after installation:
+
+```json fileName="~/.claude/settings.json"
+{
+  "env": {
+    "ENABLE_LSP_TOOL": "1"
+  }
+}
+```
+
+Restart Claude Code — it will now use `goToDefinition`, `findReferences`, and other LSP operations when navigating your Intlayer codebase instead of falling back to `grep`.
+
+---
+
+## Setup in VS Code (via extension — recommended)
+
+If you have the [Intlayer VS Code extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) installed, the language server starts automatically. No additional configuration is required.
+
+> See the [VS Code extension documentation](https://intlayer.org/doc/vs-code-extension) for installation and other features.
+
+---
+
+## Manual Setup in VS Code
+
+If you are not using the Intlayer extension, you can wire up the language server manually using a generic LSP client extension such as [**vscode-glspc**](https://marketplace.visualstudio.com/items?itemName=sibiraj-s.vscode-scss-formatter) or by writing your own small extension. The recommended approach is to use the Intlayer extension.
+
+For reference, the server launches via the `intlayer-lsp` binary over stdio:
+
+```json fileName=".vscode/settings.json"
+{
+  "intlayer.languageServer.command": "npx",
+  "intlayer.languageServer.args": ["@intlayer/lsp"]
+}
+```
+
+The Intlayer extension reads these settings to launch the server. If you rely solely on the extension, no manual settings are needed.
+
+---
+
+## Setup in Cursor
+
+[Cursor](https://www.cursor.com/) is a VS Code fork with built-in AI features. It uses the same extension ecosystem, so the **Intlayer VS Code extension** works without any extra configuration — install it once and Cursor picks it up automatically.
+
+If you prefer a manual configuration, Cursor also reads `.vscode/settings.json` from the workspace root, so the VS Code snippet above applies directly.
+
+---
+
+## Setup in Windsurf
+
+[Windsurf](https://windsurf.com/) (by Codeium) is another VS Code-based editor. Install the Intlayer extension from the VS Code Marketplace and the language server activates automatically, exactly as it does in VS Code and Cursor.
+
+For manual configuration, create `.vscode/settings.json` at the project root:
+
+```json fileName=".vscode/settings.json"
+{
+  "intlayer.languageServer.command": "npx",
+  "intlayer.languageServer.args": ["@intlayer/lsp"]
+}
+```
+
+---
+
+## Setup in Zed
+
+[Zed](https://zed.dev/) has native LSP support through its language settings. Add an entry in your Zed user settings (`~/.config/zed/settings.json`):
+
+```json fileName="~/.config/zed/settings.json"
+{
+  "lsp": {
+    "intlayer-lsp": {
+      "binary": {
+        "path": "npx",
+        "arguments": ["--yes", "@intlayer/lsp"]
+      }
+    }
+  },
+  "languages": {
+    "TypeScript": {
+      "language_servers": ["intlayer-lsp", "..."]
+    },
+    "TSX": {
+      "language_servers": ["intlayer-lsp", "..."]
+    },
+    "JavaScript": {
+      "language_servers": ["intlayer-lsp", "..."]
+    },
+    "Vue.js": {
+      "language_servers": ["intlayer-lsp", "..."]
+    },
+    "Svelte": {
+      "language_servers": ["intlayer-lsp", "..."]
+    }
+  }
+}
+```
+
+The `"..."` placeholder tells Zed to keep its default language servers alongside the Intlayer one.
+
+---
+
+## Setup for AI Agent CLIs (Claude Code, Codex, etc.)
+
+**Claude Code** has first-class LSP plugin support — follow the [Claude Code Plugin setup](#setup-as-a-claude-code-plugin) above to get the full Go-to-Definition experience directly in your terminal sessions.
+
+**OpenAI Codex** and other terminal-based tools do not yet act as LSP clients — they read and write files directly rather than maintaining a persistent language-server session. For those tools, the value of having the LSP running comes indirectly: when the server is active in a companion editor (VS Code, Cursor, Windsurf, …) the editor's live index is available to any AI agent that can query it through editor-provided context (e.g., Cursor Composer, Windsurf Cascade, GitHub Copilot Chat).
+
+If you are working purely in a terminal without an editor open, you can start the language server in the background so it's ready for any editor that later connects to the same workspace:
+
+```bash
+# Keep the server alive in the background
+npx @intlayer/lsp &
+```
+
+---
+
+## Manual Setup in Neovim
+
+Using [nvim-lspconfig](https://github.com/neovim/nvim-lspconfig), register a custom server configuration:
+
+```lua fileName="~/.config/nvim/init.lua"
+local lspconfig = require('lspconfig')
+local configs = require('lspconfig.configs')
+
+if not configs.intlayer_lsp then
+  configs.intlayer_lsp = {
+    default_config = {
+      -- Launch the server with npx so you don't need a global install
+      cmd = { 'npx', '--yes', '@intlayer/lsp' },
+      filetypes = {
+        'typescript',
+        'typescriptreact',
+        'javascript',
+        'javascriptreact',
+        'vue',
+        'svelte',
+      },
+      root_dir = lspconfig.util.root_pattern(
+        'intlayer.config.ts',
+        'intlayer.config.js',
+        'package.json'
+      ),
+    },
+  }
+end
+
+lspconfig.intlayer_lsp.setup({})
+```
+
+After restarting Neovim, pressing `gd` over an Intlayer key will invoke Go to Definition.
+
+---
+
+## Manual Setup in Other Editors
+
+Any editor that supports the Language Server Protocol can use `@intlayer/lsp`. The server:
+
+- **Transport** – Node.js IPC / stdio (standard)
+- **Executable** – `npx @intlayer/lsp` (or the locally installed `intlayer-lsp` binary)
+- **Capabilities** – `definitionProvider: true`, `textDocumentSync: Incremental`
+
+Consult your editor's LSP documentation for the exact configuration format (e.g., `languageserver.json` for [coc.nvim](https://github.com/neoclide/coc.nvim), or the LSP client settings in [Helix](https://helix-editor.com)).
+
+### Example: coc.nvim
+
+```json fileName="~/.config/nvim/coc-settings.json"
+{
+  "languageserver": {
+    "intlayer": {
+      "command": "npx",
+      "args": ["@intlayer/lsp"],
+      "filetypes": [
+        "typescript",
+        "typescriptreact",
+        "javascript",
+        "javascriptreact",
+        "vue",
+        "svelte"
+      ],
+      "rootPatterns": [
+        "intlayer.config.ts",
+        "intlayer.config.js",
+        "package.json"
+      ]
+    }
+  }
+}
+```
+
+### Example: Helix
+
+```toml fileName="~/.config/helix/languages.toml"
+[[language]]
+name = "typescript"
+language-servers = ["intlayer-lsp", "typescript-language-server"]
+
+[[language]]
+name = "tsx"
+language-servers = ["intlayer-lsp", "typescript-language-server"]
+
+[language-server.intlayer-lsp]
+command = "npx"
+args = ["@intlayer/lsp"]
+```
+
+---
+
+## How It Works
+
+When the server starts, it resolves the Intlayer configuration from the workspace root using `getConfiguration()`. This gives it the `build` and `system` paths needed to find compiled dictionaries.
+
+On each **Go to Definition** request:
+
+1. The server reads the full text of the open document.
+2. It scans for getter calls (`useIntlayer`, `getIntlayer`, etc.) using a regular expression.
+3. It checks whether the cursor position falls inside one of those calls.
+4. If it does, it extracts the dictionary key (capture group 3 of the regex) and calls `getUnmergedDictionaries()` to locate every content file that declares that key.
+5. It reads each matching file and finds the exact line containing `key: "<key>"` to position the cursor precisely.
+6. It returns an array of `Location` objects — one per source file.
+
+Configuration is lazily resolved and cached per session; it resets on each `initialize` request (e.g., when you open a new workspace folder).
+
+---
+
+## Troubleshooting
+
+| Symptom                         | Likely cause               | Fix                                                                             |
+| ------------------------------- | -------------------------- | ------------------------------------------------------------------------------- |
+| Go to Definition does nothing   | Server not running         | Check that `@intlayer/lsp` is installed and the editor is launching it          |
+| Wrong workspace root detected   | Multiple workspace folders | Ensure the folder containing `intlayer.config.ts` is the first workspace folder |
+| Definitions not found for a key | Config not resolved        | Verify `intlayer.config.ts` (or `.js`) exists at the workspace root             |
+| Server crashes on start         | Node.js version too old    | Requires Node.js ≥ 14.18                                                        |

package/docs/en-GB/mcp_server.md

@@ -247,6 +247,28 @@ Path of the config file:
 
 ---
 
+## 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)
+
+To connect the Intlayer MCP server to Claude Code using stdio:
+
+```bash
+claude mcp add intlayer npx -y @intlayer/mcp
+```
+
+### Remote server (Streamable HTTP)
+
+To connect the Intlayer MCP server to Claude Code using Streamable HTTP (SSE):
+
+```bash
+claude mcp add intlayer https://mcp.intlayer.org -t http
+```
+
+---
+
 ## Using the MCP Server via CLI
 
 You can also run the Intlayer MCP server directly from the command line for testing, debugging, or integration with other tools.

package/docs/es/agent_skills.md

@@ -72,7 +72,7 @@ npx skills add aymericzip/intlayer-skills
 
 **intlayer-astro**
 
-- Proporciona al agente el conocimiento necesario para manejar las traducciones del lado del servidor y los patrones de enrutamiento localizados únicos en el ecosistema de Astro.
+- Proporciona al agente el conocimiento necesario para manejar las traducciones del lado del servidor y los patrones de enrutamiento por localeizados únicos en el ecosistema de Astro.
 
 **intlayer-content**
 
@@ -80,7 +80,7 @@ npx skills add aymericzip/intlayer-skills
 
 **intlayer-next-js**
 
-- Da al agente la profundidad necesaria para implementar i18n en los componentes de Servidor y Cliente de Next.js, asegurando la optimización SEO y un enrutamiento localizado sin problemas.
+- Da al agente la profundidad necesaria para implementar i18n en los componentes de Servidor y Cliente de Next.js, asegurando la optimización SEO y un enrutamiento por localeizado sin problemas.
 
 **intlayer-react**
 

package/docs/es/benchmark/nextjs.md

@@ -90,7 +90,7 @@ Limitaciones técnicas de estos enfoques:
 
 Incluso cuando declaras rutas como `[locale]/page.tsx`, con Webpack o Turbopack, e incluso si se define `generateStaticParams`, el bundler no trata `locale` como una constante estática. Eso significa que puede incluir el contenido de todos los idiomas en cada página. La forma principal de limitar esto es cargar el contenido a través de un import dinámico (por ejemplo, `import('./locales/${locale}.json')`).
 
-Lo que sucede en tiempo de compilación es que Next.js emite un bundle JS por idioma (por ejemplo, `./locales_fr_12345.js`). Una vez que el sitio se envía al cliente, cuando la página se ejecuta, el navegador realiza una petición HTTP adicional para el archivo JS necesario (por ejemplo, `./locales_fr_12345.js`).
+Lo que sucede en tiempo de compilación (build time) es que Next.js emite un bundle JS por idioma (por ejemplo, `./locales_fr_12345.js`). Una vez que el sitio se envía al cliente, cuando la página se ejecuta, el navegador realiza una petición HTTP adicional para el archivo JS necesario (por ejemplo, `./locales_fr_12345.js`).
 
 > Otra forma de abordar el mismo problema es usar `fetch()` para cargar el JSON dinámicamente. Así es como funciona `Tolgee` cuando el JSON reside en `/public`, o `next-translate`, que se basa en `getStaticProps` para cargar el contenido. El flujo es el mismo: el navegador realiza una petición HTTP adicional para cargar el recurso.
 
@@ -102,7 +102,7 @@ Para mitigar esto, algunas librerías te piden declarar por página qué namespa
 
 Por el contrario, `Paraglide` añade un paso adicional antes de la compilación para convertir el JSON en símbolos planos como `const en_my_var = () => 'mi valor'`. En teoría, esto permite el tree-shaking del contenido no utilizado en la página. Como veremos, este método todavía tiene sus compromisos.
 
-Finalmente, `Intlayer` aplica una optimización en tiempo de compilación para que `useIntlayer('mi-clave')` se reemplace directamente con el contenido correspondiente.
+Finalmente, `Intlayer` aplica una optimización en tiempo de compilación (build time) para que `useIntlayer('mi-clave')` se reemplace directamente con el contenido correspondiente.
 
 ## Metodología
 
@@ -207,7 +207,7 @@ Finalmente, en comparación con otras soluciones, Paraglide no usa un almacén (
 
 **(Tolgee)** (`@tolgee/react@7.0.0`):
 
-`Tolgee` aborda muchos de los problemas mencionados anteriormente. Me resultó más difícil de adoptar que herramientas similares. No proporciona seguridad de tipos (type safety), lo que también dificulta detectar claves faltantes en tiempo de compilación. Tuve que envolver las funciones de Tolgee con las mías propias para añadir la detección de claves faltantes.
+`Tolgee` aborda muchos de los problemas mencionados anteriormente. Me resultó más difícil de adoptar que herramientas similares. No proporciona seguridad de tipos (type safety), lo que también dificulta detectar claves faltantes en tiempo de compilación (build time). Tuve que envolver las funciones de Tolgee con las mías propias para añadir la detección de claves faltantes.
 
 **(Next Intl)** (`next-intl@4.9.1`):
 

package/docs/es/benchmark/solid.md

@@ -2,7 +2,7 @@
 createdAt: 2026-04-20
 updatedAt: 2026-05-18
 title: La mejor solución i18n para Solid en 2026 - Informe de Benchmark
-description: Compara bibliotecas de internacionalización (i18n) para Solid como solid-primitives, solid-i18next e Intlayer. Informe de rendimiento detallado sobre el tamaño del paquete, fugas y reactividad.
+description: Compara bibliotecas de internacionalización (i18n) para Solid como solid-primitives, solid-i18next e Intlayer. Informe de rendimiento detallado sobre el tamaño del bundle, fugas y reactividad.
 keywords:
   - benchmark
   - i18n
@@ -90,7 +90,7 @@ Con la carga dinámica, se acepta un compromiso: menos JS inicial, pero a veces
 
 **División de contenido (Splitting)**
 
-Las sintaxis construidas en torno a `t('a.b.c')` son muy convenientes pero a menudo fomentan el mantenimiento de grandes objetos JSON en tiempo de ejecución. Ese modelo dificulta el tree-shaking a menos que la biblioteca ofrezca una estrategia real de división por página.
+Las sintaxis construidas en torno a `t('a.b.c')` son muy convenientes pero a menudo fomentan el mantenimiento de grandes objetos JSON en runtime. Ese modelo dificulta el tree-shaking a menos que la biblioteca ofrezca una estrategia real de división por página.
 
 ## Metodología
 
@@ -113,7 +113,7 @@ Comparamos **quatro estrategias de carga**:
 
 ## Resumen de estrategias
 
-- **Static**: Simple; sin latencia de red después de la carga inicial. Desventaja: gran tamaño del paquete.
+- **Static**: Simple; sin latencia de red después de la carga inicial. Desventaja: gran tamaño del bundle.
 - **Dynamic**: Reduce el peso inicial (lazy-loading). Ideal cuando se tienen muchos idiomas.
 - **Scoped static**: Mantiene el código organizado (separación lógica) sin solicitudes de red adicionales complejas.
 - **Scoped dynamic**: El mejor enfoque para el _code splitting_ y el rendimiento. Minimiza la memoria cargando solo lo que la vista actual y el idioma activo necesitan.

package/docs/es/benchmark/svelte.md

@@ -2,7 +2,7 @@
 createdAt: 2026-04-20
 updatedAt: 2026-05-18
 title: La mejor solución i18n para Svelte en 2026 - Informe de Benchmark
-description: Compara bibliotecas de internacionalización (i18n) para Svelte como svelte-i18n, Paraglide e Intlayer. Informe de rendimiento detallado sobre el tamaño del paquete, fugas y reactividad.
+description: Compara bibliotecas de internacionalización (i18n) para Svelte como svelte-i18n, Paraglide e Intlayer. Informe de rendimiento detallado sobre el tamaño del bundle, fugas y reactividad.
 keywords:
   - benchmark
   - i18n
@@ -89,7 +89,7 @@ Con la carga dinámica, se acepta un compromiso: menos JS inicial, pero a veces
 
 **División de contenido (Splitting)**
 
-Las sintaxis construidas en torno a `t('a.b.c')` son muy convenientes pero a menudo fomentan el mantenimiento de grandes objetos JSON en tiempo de ejecución. Ese modelo dificulta el tree-shaking a menos que la biblioteca ofrezca una estrategia real de división por página.
+Las sintaxis construidas en torno a `t('a.b.c')` son muy convenientes pero a menudo fomentan el mantenimiento de grandes objetos JSON en runtime. Ese modelo dificulta el tree-shaking a menos que la biblioteca ofrezca una estrategia real de división por página.
 
 ## Metodología
 
@@ -111,7 +111,7 @@ Comparamos **quatro estrategias de carga**:
 
 ## Resumen de estrategias
 
-- **Static**: Simple; sin latencia de red después de la carga inicial. Desventaja: gran tamaño del paquete.
+- **Static**: Simple; sin latencia de red después de la carga inicial. Desventaja: gran tamaño del bundle.
 - **Dynamic**: Reduce el peso inicial (lazy-loading). Ideal cuando se tienen muchos idiomas.
 - **Scoped static**: Mantiene el código organizado (separación lógica) sin solicitudes de red adicionales complejas.
 - **Scoped dynamic**: El mejor enfoque para el _code splitting_ y el rendimiento. Minimiza la memoria cargando solo lo que la vista actual y el idioma activo necesitan.

package/docs/es/benchmark/tanstack.md

@@ -90,7 +90,7 @@ Con la carga dinámica, aceptas un compromiso: menos JS inicial, pero a veces un
 
 **División de contenido (Content splitting)**
 
-Las sintaxis basadas en `const t = useTranslation()` + `t('a.b.c')` son muy cómodas pero a menudo fomentan el mantenimiento de grandes objetos JSON en tiempo de ejecución. Ese modelo dificulta el tree-shaking a menos que la librería ofrezca una estrategia real de división por página.
+Las sintaxis basadas en `const t = useTranslation()` + `t('a.b.c')` son muy cómodas pero a menudo fomentan el mantenimiento de grandes objetos JSON en runtime. Ese modelo dificulta el tree-shaking a menos que la librería ofrezca una estrategia real de división por página.
 
 ## Metodología
 
@@ -170,7 +170,7 @@ La idea detrás de `Wuchale` es interesante pero todavía no es una solución vi
 
 **(Tolgee)** (`@tolgee/react@7.0.0`):
 
-`Tolgee` aborda muchos de los problemas mencionados anteriormente. Me resultó más difícil empezar con ella que con otras herramientas con enfoques similares. No proporciona seguridad de tipos, lo que también dificulta mucho detectar claves faltantes en tiempo de compilación. Tuve que envolver las API de Tolgee con las mías propias para añadir la detección de claves faltantes.
+`Tolgee` aborda muchos de los problemas mencionados anteriormente. Me resultó más difícil empezar con ella que con otras herramientas con enfoques similares. No proporciona seguridad de tipos, lo que también dificulta mucho detectar claves faltantes en tiempo de compilación (build time). Tuve que envolver las API de Tolgee con las mías propias para añadir la detección de claves faltantes.
 
 En TanStack Start también tuve problemas de reactividad: al cambiar de idioma, tuve que forzar el renderizado del proveedor y suscribirme a eventos de cambio de idioma para que la carga en otro idioma se comportara correctamente.
 

package/docs/es/benchmark/vue.md

@@ -2,7 +2,7 @@
 createdAt: 2026-04-20
 updatedAt: 2026-05-18
 title: La mejor solución i18n para Vue en 2026 - Informe de Benchmark
-description: Compara bibliotecas de internacionalización (i18n) para Vue como vue-i18n, fluent-vue e Intlayer. Informe de rendimiento detallado sobre el tamaño del paquete, fugas y reactividad.
+description: Compara bibliotecas de internacionalización (i18n) para Vue como vue-i18n, fluent-vue e Intlayer. Informe de rendimiento detallado sobre el tamaño del bundle, fugas y reactividad.
 keywords:
   - benchmark
   - i18n
@@ -89,7 +89,7 @@ Con la carga dinámica, se acepta un compromiso: menos JS inicial, pero a veces
 
 **División de contenido (Splitting)**
 
-Las sintaxis construidas en torno a `const { t } = useI18n()` + `t('a.b.c')` son muy convenientes pero a menudo fomentan el mantenimiento de grandes objetos JSON en tiempo de ejecución. Ese modelo dificulta el tree-shaking a menos que la biblioteca ofrezca una estrategia real de división por página.
+Las sintaxis construidas en torno a `const { t } = useI18n()` + `t('a.b.c')` son muy convenientes pero a menudo fomentan el mantenimiento de grandes objetos JSON en runtime. Ese modelo dificulta el tree-shaking a menos que la biblioteca ofrezca una estrategia real de división por página.
 
 ## Metodología
 
@@ -111,7 +111,7 @@ Comparamos **cuatro estrategias de carga**:
 
 ## Resumen de estrategias
 
-- **Static**: Simple; sin latencia de red después de la carga inicial. Desventaja: gran tamaño del paquete.
+- **Static**: Simple; sin latencia de red después de la carga inicial. Desventaja: gran tamaño del bundle.
 - **Dynamic**: Reduce el peso inicial (lazy-loading). Ideal cuando se tienen muchos idiomas.
 - **Scoped static**: Mantiene el código organizado (separación lógica) sin solicitudes de red adicionales complejas.
 - **Scoped dynamic**: El mejor enfoque para el _code splitting_ y el rendimiento. Minimiza la memoria cargando solo lo que la vista actual y el idioma activo necesitan.

package/docs/es/bundle_optimization.md

@@ -27,7 +27,7 @@ Uno de los desafíos más comunes con las soluciones i18n tradicionales que depe
 
 Por ejemplo, una aplicación con 10 páginas traducidas a 10 idiomas podría resultar en que un usuario descargue el contenido de 100 páginas, aunque solo necesite **una** (la página actual en el idioma actual). Esto conduce a un desperdicio de ancho de banda y tiempos de carga más lentos.
 
-**Intlayer resuelve este problema a través de la optimización en tiempo de compilación.** Analiza su código para detectar qué diccionarios se usan realmente por componente y reinyecta solo el contenido necesario en su bundle.
+**Intlayer resuelve este problema a través de la optimización en tiempo de compilación (build time).** Analiza su código para detectar qué diccionarios se usan realmente por componente y reinyecta solo el contenido necesario en su bundle.
 
 ## Tabla de contenidos
 

package/docs/es/cli/build.md

@@ -57,7 +57,7 @@ pnpm intlayer build --watch
 bun x intlayer build --watch
 ```
 
-Este comando encontrará tus archivos de declaración de contenido por defecto en `./src/**/*.content.{ts|js|mjs|cjs|json|tsx|jsx}`. Y construirá los diccionarios en el directorio `.intlayer`.
+Este comando encontrará tus archivos de declaración de contenido por defecto en `./src/**/*.content.{ts|js|mjs|cjs|json|tsx|jsx|md|mdx|yaml|yml}`. Y construirá los diccionarios en el directorio `.intlayer`.
 
 ## Alias:
 

package/docs/es/cli/index.md

@@ -100,7 +100,7 @@ bun add intlayer-cli -g
 
 El paquete `intlayer-cli` tiene la intención de transpilar sus [declaraciones de intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md) en diccionarios.
 
-Este paquete transpilará todos los archivos intlayer, como `src/**/*.content.{ts|js|mjs|cjs|json}`. [Vea cómo declarar sus archivos de declaración de Intlayer](https://github.com/aymericzip/intlayer/blob/main/packages/intlayer/README.md).
+Este paquete transpilará todos los archivos intlayer, como `src/**/*.content.{ts|js|mjs|cjs|json|tsx|jsx|md|mdx|yaml|yml}`. [Vea cómo declarar sus archivos de declaración de Intlayer](https://github.com/aymericzip/intlayer/blob/main/packages/intlayer/README.md).
 
 Para interpretar diccionarios intlayer puede usar intérpretes, como [react-intlayer](https://www.npmjs.com/package/react-intlayer), o [next-intlayer](https://www.npmjs.com/package/next-intlayer).
 
@@ -156,7 +156,7 @@ Para ver cómo configurar los locales disponibles u otros parámetros, consulte
 ### Editor y Sincronización en vivo
 
 - **[Comandos del editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/editor.md)** - Use los comandos del editor de Intlayer
-- **[Comandos de sincronización en vivo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/live.md)** - Use Live Sync para reflejar los cambios de contenido del CMS en tiempo de ejecución
+- **[Comandos de sincronización en vivo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/live.md)** - Use Live Sync para reflejar los cambios de contenido del CMS en runtime
 
 ### CI/CD y Automatización
 

package/docs/es/cli/live.md

@@ -2,7 +2,7 @@
 createdAt: 2024-08-11
 updatedAt: 2025-11-22
 title: Comandos de Live Sync
-description: Aprende a usar Live Sync para reflejar cambios en el contenido del CMS en tiempo de ejecución.
+description: Aprende a usar Live Sync para reflejar cambios en el contenido del CMS en runtime.
 keywords:
   - Live Sync
   - CMS
@@ -18,7 +18,7 @@ slugs:
 
 # Comandos de Live Sync
 
-Live Sync permite que tu aplicación refleje los cambios en el contenido del CMS en tiempo de ejecución. No se requiere reconstrucción ni redeploy. Cuando está habilitado, las actualizaciones se transmiten a un servidor de Live Sync que actualiza los diccionarios que tu aplicación lee. Consulta [Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md) para más detalles.
+Live Sync permite que tu aplicación refleje los cambios en el contenido del CMS en runtime. No se requiere reconstrucción ni redeploy. Cuando está habilitado, las actualizaciones se transmiten a un servidor de Live Sync que actualiza los diccionarios que tu aplicación lee. Consulta [Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md) para más detalles.
 
 ```json fileName="package.json"
 "scripts": {

package/docs/es/compiler.md

@@ -51,7 +51,7 @@ Consulta el artículo del blog [Compiler vs. Declarative i18n](https://github.co
 Si bien el compilador ofrece una excelente experiencia de "funciona sin más", también introduce algunos compromisos de los que debes ser consciente:
 
 - **Ambigüedad heurística**: El compilador debe adivinar qué es contenido orientado al usuario frente a la lógica de la aplicación (por ejemplo, `className="active"`, códigos de estado, IDs de productos). En bases de código complejas, esto puede llevar a falsos positivos o cadenas omitidas que requieren anotaciones manuales y excepciones.
-- **Extracción solo estática**: La extracción basada en compilador se basa en análisis estático. Las cadenas que solo existen en tiempo de ejecución (códigos de error de API, campos CMS, etc.) no pueden ser descubiertas o traducidas por el compilador solo, por lo que aún necesitas una estrategia i18n de tiempo de ejecución complementaria.
+- **Extracción solo estática**: La extracción basada en compilador se basa en análisis estático. Las cadenas que solo existen en runtime (códigos de error de API, campos CMS, etc.) no pueden ser descubiertas o traducidas por el compilador solo, por lo que aún necesitas una estrategia i18n de tiempo de ejecución complementaria.
 
 Para una comparación arquitectónica más profunda, consulta el artículo del blog [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/es/compiler_vs_declarative_i18n.md).
 

package/docs/es/component_i18n.md

@@ -168,7 +168,7 @@ Consejo: Para metadatos de página y SEO, también puedes obtener contenido con
 ## Por qué el enfoque de componentes de Intlayer es el mejor
 
 - Colocación: Las declaraciones de contenido viven cerca de los componentes, reduciendo la deriva y mejorando la reutilización en los sistemas de diseño.
-- Seguridad de tipos: Las claves y estructuras están fuertemente tipadas; las traducciones faltantes aparecen en tiempo de build en lugar de en tiempo de ejecución.
+- Seguridad de tipos: Las claves y estructuras están fuertemente tipadas; las traducciones faltantes aparecen en tiempo de build en lugar de en runtime.
 - Server-first: Funciona de forma nativa en componentes de servidor para mejor seguridad y rendimiento; los hooks de cliente siguen siendo ergonómicos.
 - Tree-shaking: Solo se incluye el contenido usado por el componente, manteniendo cargas pequeñas en aplicaciones grandes.
 - DX y herramientas: Middleware incorporado, asistentes de SEO y traducciones opcionales mediante Editor Visual/IA agilizan el trabajo diario.

package/docs/es/custom_domains.md

@@ -2,7 +2,7 @@
 createdAt: 2026-04-02
 updatedAt: 2026-04-02
 title: Dominios personalizados
-description: Aprenda a configurar el enrutamiento de locales basado en dominios en Intlayer para servir diferentes locales desde nombres de host dedicados.
+description: Aprenda a configurar el enrutamiento por locales basado en dominios en Intlayer para servir diferentes locales desde nombres de host dedicados.
 keywords:
   - Dominios personalizados
   - Enrutamiento por dominio
@@ -16,12 +16,12 @@ slugs:
 history:
   - version: 8.5.0
     date: 2026-04-02
-    changes: "Se agregó el enrutamiento de locales basado en dominios a través de la configuración routing.domains."
+    changes: "Se agregó el enrutamiento por locales basado en dominios a través de la configuración routing.domains."
 ---
 
 # Dominios personalizados
 
-Intlayer admite el enrutamiento de locales basado en dominios, lo que le permite servir locales específicos desde nombres de host dedicados. Por ejemplo, los visitantes chinos pueden ser dirigidos a `intlayer.zh` en lugar de `intlayer.org/zh`.
+Intlayer admite el enrutamiento por locales basado en dominios, lo que le permite servir locales específicos desde nombres de host dedicados. Por ejemplo, los visitantes chinos pueden ser dirigidos a `intlayer.zh` en lugar de `intlayer.org/zh`.
 
 ## Cómo funciona
 

package/docs/es/dictionary/condition.md

@@ -22,7 +22,7 @@ slugs:
 
 ## Cómo Funciona la Condición
 
-En Intlayer, el contenido condicional se logra a través de la función `cond`, que asigna condiciones específicas (típicamente valores booleanos) a su contenido correspondiente. Este enfoque permite seleccionar dinámicamente el contenido basado en una condición dada. Cuando se integra con React Intlayer o Next Intlayer, el contenido apropiado se elige automáticamente según la condición proporcionada en tiempo de ejecución.
+En Intlayer, el contenido condicional se logra a través de la función `cond`, que asigna condiciones específicas (típicamente valores booleanos) a su contenido correspondiente. Este enfoque permite seleccionar dinámicamente el contenido basado en una condición dada. Cuando se integra con React Intlayer o Next Intlayer, el contenido apropiado se elige automáticamente según la condición proporcionada en runtime.
 
 ## Configuración de Contenido Condicional