\n\n\n

{$content.title}

Name: Intlayer
Author: Intlayer

\n\n

{@const Title = $content.title}</h1>\n\n<div aria-label={$content.title.value}></div>\n<div aria-label={$content.title.toString()}></div>\n<div aria-label={String($content.title)}></div>\n```\n\n### (Opcional) Paso 6: Configurar el enrutamiento\n\nLos siguientes pasos muestran cómo configurar el enrutamiento basado en el locale en SvelteKit. Esto permite que tus URLs incluyan el prefijo del locale (por ejemplo, `/en/about`, `/fr/about`) para mejorar el SEO y la experiencia del usuario.\n\n```bash\n.\n└─── src\n ├── app.d.ts # Definir el tipo de locale\n ├── hooks.server.ts # Gestionar el enrutamiento del locale\n ├── lib\n │ └── getLocale.ts # Comprobar el locale desde el header, cookies\n ├── params\n │ └── locale.ts # Definir el parámetro locale\n └── routes\n ├── [[locale=locale]] # Envolver en un grupo de rutas para establecer el locale\n │ ├── +layout.svelte # Diseño local para la ruta\n │ ├── +layout.ts\n │ ├── +page.svelte\n │ ├── +page.ts\n │ └── about\n │ ├── +page.svelte\n │ └── +page.ts\n └── +layout.svelte # Diseño raíz para fuentes y estilos globales\n```\n\n### Paso 7: Manejar la detección del locale en el servidor (Hooks)\n\nEn SvelteKit, el servidor necesita conocer el locale del usuario para renderizar el contenido correcto durante SSR. Usamos `hooks.server.ts` para detectar el locale desde la URL o las cookies.\n\nCrea o modifica `src/hooks.server.ts`:\n\n```typescript fileName=\"src/hooks.server.ts\"\nimport type { Handle } from \"@sveltejs/kit\";\nimport { getLocalizedUrl } from \"intlayer\";\nimport { getLocale } from \"$lib/getLocale\";\n\nexport const handle: Handle = async ({ event, resolve }) => {\n const detectedLocale = getLocale(event);\n\n // Verifica si la ruta actual ya comienza con una locale (ej. /fr, /en)\n const pathname = event.url.pathname;\n const targetPathname = getLocalizedUrl(pathname, detectedLocale);\n\n // Si NO hay una locale presente en la URL (ej. el usuario visita \"/\"), redirígelo\n if (targetPathname !== pathname) {\n return new Response(undefined, {\n headers: { Location: targetPathname },\n status: 307, // Redirección temporal\n });\n }\n\n return resolve(event, {\n transformPageChunk: ({ html }) => html.replace(\"%lang%\", detectedLocale),\n });\n};\n```\n\nLuego, crea un helper para obtener la locale del usuario desde el evento de la solicitud:\n\n```typescript fileName=\"src/lib/getLocale.ts\"\nimport {\n configuration,\n getLocaleFromStorage,\n localeDetector,\n type Locale,\n} from \"intlayer\";\nimport type { RequestEvent } from \"@sveltejs/kit\";\n\n/**\n * Obtiene la configuración regional del usuario a partir del evento de la solicitud.\n * Esta función se utiliza en el hook `handle` en `src/hooks.server.ts`.\n *\n * Primero intenta obtener la configuración regional desde el almacenamiento de Intlayer (cookies o encabezados personalizados).\n * Si no se encuentra la configuración regional, recurre a la negociación \"Accept-Language\" del navegador.\n *\n * @param event - El evento de solicitud de SvelteKit\n * @returns La configuración regional del usuario\n */\nexport const getLocale = (event: RequestEvent): Locale => {\n const defaultLocale = configuration?.internationalization?.defaultLocale;\n\n // Intentar obtener la configuración regional desde el almacenamiento de Intlayer (Cookies o encabezados)\n const storedLocale = getLocaleFromStorage({\n // Acceso a cookies en SvelteKit\n getCookie: (name: string) => event.cookies.get(name) ?? null,\n // Acceso a headers en SvelteKit\n getHeader: (name: string) => event.request.headers.get(name) ?? null,\n });\n\n if (storedLocale) {\n return storedLocale;\n }\n\n // Recurso a la negociación \"Accept-Language\" del navegador\n const negotiatorHeaders: Record<string, string> = {};\n\n // Convertir el objeto Headers de SvelteKit a un Record<string, string> plano\n event.request.headers.forEach((value, key) => {\n negotiatorHeaders[key] = value;\n });\n\n // Comprobar la locale a partir del header `Accept-Language`\n const userFallbackLocale = localeDetector(negotiatorHeaders);\n\n if (userFallbackLocale) {\n return userFallbackLocale;\n }\n\n // Devolver la locale por defecto si no se encuentra ninguna coincidencia\n return defaultLocale;\n};\n```\n\n> `getLocaleFromStorage` verificará la localidad desde el encabezado o la cookie dependiendo de tu configuración. Consulta [Configuración](https://intlayer.org/doc/configuration) para más detalles.\n\n> La función `localeDetector` procesará el encabezado `Accept-Language` y devolverá la mejor coincidencia.\n\nSi la localidad no está configurada, queremos devolver un error 404. Para facilitarlo, podemos crear una función `match` para verificar si la localidad es válida:\n\n```ts fileName=\"/src/params/locale.ts\"import { defaultLocale, locales, type Locale } from \"intlayer\";\nexport const match = (param: Locale = defaultLocale): boolean =>\n locales.includes(param);\n```\n\n> **Nota:** Asegúrate de que tu `src/app.d.ts` incluya la definición de la localidad:\n>\n> ```typescript\n> declare global {\n> namespace App {\n> interface Locals {\n> locale: import(\"intlayer\").Locale;\n> }\n> }\n> }\n> ```\n\nPara el archivo `+layout.svelte`, podemos eliminar todo, para mantener solo contenido estático, no relacionado con i18n:\n\n```svelte fileName=\"src/+layout.svelte\"\n<script lang=\"ts\">\n\t import './layout.css';\n\n let { children } = $props();\n</script>\n\n<div class=\"app\">\n\t{@render children()}\n</div>\n\n<style>\n\t.app {\n /* */\n\t}\n</style>\n```\n\nLuego, crea una nueva página y layout bajo el grupo `[[locale=locale]]`:\n\n```ts fileName=\"src/routes/[[locale=locale]]/+layout.ts\"\nimport type { Load } from \"@sveltejs/kit\";\nimport { defaultLocale, type Locale } from \"intlayer\";\n\nexport const prerender = true;\n\n// Usa el tipo genérico Load\nexport const load: Load = ({ params }) => {\n const locale: Locale = (params.locale as Locale) ?? defaultLocale;\n\n return {\n locale,\n };\n};\n```\n\n```svelte fileName=\"src/routes/[[locale=locale]]/+layout.svelte\"\n<script lang=\"ts\">\n\timport type { Snippet } from 'svelte';\n\timport { useIntlayer, setupIntlayer } from \"svelte-intlayer\";\n\timport Header from './Header.svelte';\n\timport type { LayoutData } from './$types';\n\n\tlet { children, data }: { children: Snippet, data: LayoutData } = $props();\n\n\t// Inicializar Intlayer con la locale de la ruta\n $effect(() => {\n setupIntlayer(data.locale);\n });\n\t// Usar el diccionario de contenido del layout\n\tconst layoutContent = useIntlayer('layout');\n</script>\n\n<Header />\n\n<main>\n\t{@render children()}\n</main>\n\n<footer>\n\t<p>\n\t\t{$layoutContent.footer.prefix.value}{' '}\n\t\t<a href=\"https://svelte.dev/docs/kit\">{$layoutContent.footer.linkLabel.value}</a>{' '}\n\t\t{$layoutContent.footer.suffix.value}\n\t</p>\n</footer>\n\n<style>\n /* */\n</style>\n```\n\n```ts fileName=\"src/routes/[[locale=locale]]/+page.ts\"\nexport const prerender = true;\n```\n\n```svelte fileName=\"src/routes/[[locale=locale]]/+page.svelte\"\n<script lang=\"ts\">\n\timport { useIntlayer } from \"svelte-intlayer\";\n\n\t// Usar el diccionario de contenido de la página principal\n\tconst homeContent = useIntlayer('home');\n</script>\n\n<svelte:head>\n\t<title>{$homeContent.title.value}\n\n\n

\n\t

\n\t\t{$homeContent.title}\n\t

\n\n\n```\n\n### (Opcional) Paso 8: Enlaces internacionalizados\n\nPara SEO, se recomienda prefijar tus rutas con la locale (por ejemplo, `/en/about`, `/fr/about`). Este componente automáticamente prefija cualquier enlace con la locale actual.\n\n```svelte fileName=\"src/lib/components/LocalizedLink.svelte\"\n\n\n\n \n\n```\n\nSi usas `goto` de SvelteKit, puedes usar la misma lógica con `getLocalizedUrl` para navegar a la URL localizada:\n\n```typescript\nimport { goto } from \"$app/navigation\";\nimport { getLocalizedUrl } from \"intlayer\";\nimport { useLocale } from \"svelte-intlayer\";\n\nconst { locale } = useLocale();\nconst localizedPath = getLocalizedUrl(\"/about\", $locale);\ngoto(localizedPath); // Navega a /en/about o /fr/about dependiendo del locale\n```\n\n### (Opcional) Paso 9: Selector de idioma\n\nPara permitir a los usuarios cambiar de idioma, actualiza la URL.\n\n```svelte fileName=\"src/lib/components/LanguageSwitcher.svelte\"\n\n\n

\n {\n e.preventDefault();\n setLocale(localeEl); // Establecerá la locale en el store y activará onLocaleChange\n }}\n class:active={$locale === localeEl}\n >\n {getLocaleName(localeEl)}\n \n

\n\n\n```\n\n### (Opcional) Paso 10: Añadir proxy backend\n\nPara añadir un proxy backend a tu aplicación SvelteKit, puedes usar la función `intlayerProxy` proporcionada por el plugin `vite-intlayer`. Este plugin detectará automáticamente la mejor locale para el usuario basándose en la URL, cookies y preferencias de idioma del navegador.\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerProxy } from \"vite-intlayer\";\nimport { sveltekit } from \"@sveltejs/kit/vite\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n intlayerProxy(), // should be placed first\n intlayer(),\n sveltekit(),\n ],],\n});\n```\n\n### (Opcional) Paso 11: Configurar el editor / CMS de intlayer\n\nPara configurar el editor de intlayer, debes seguir la [documentación del editor de intlayer](/es/doc/concept/editor).\n\nPara configurar el CMS de intlayer, debes seguir la [documentación del CMS de intlayer](/es/doc/concept/cms).\n\nPara poder visualizar el selector del editor intlayer, deberás usar la sintaxis de componente en tu contenido intlayer.\n\n```svelte fileName=\"Component.svelte\"\n\n\n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

\n```\n\n### (Opcional) Paso 12 : Extraer el contenido de tus componentes\n\nSi tienes una base de código existente, transformar miles de archivos puede llevar mucho tiempo.\n\nPara facilitar este proceso, Intlayer propone un [compilador](/es/doc/compiler) / [extractor](/es/doc/concept/cli/extract) para transformar tus componentes y extraer el contenido.\n\nPara configurarlo, puedes agregar una sección `compiler` en tu archivo `intlayer.config.ts` :\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... Resto de tu configuración\n compiler: {\n /**\n * Indica si el compilador debe estar habilitado.\n */\n enabled: true,\n\n /**\n * Define la ruta de los archivos de salida\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * Indica si los componentes deben guardarse después de ser transformados. De esa manera, el compilador se puede ejecutar solo una vez para transformar la aplicación y luego se puede eliminar.\n */\n saveComponents: false,\n\n /**\n * Prefijo de clave de diccionario\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nEjecuta el extractor para transformar tus componentes y extraer el contenido\n\n```bash packageManager=\"npm\"\nnpx intlayer extract\n```\n\n```bash packageManager=\"pnpm\"\npnpm intlayer extract\n```\n\n```bash packageManager=\"yarn\"\nyarn intlayer extract\n```\n\n```bash packageManager=\"bun\"\nbun x intlayer extract\n```\n\n \n \n\nActualiza tu archivo `vite.config.ts` para incluir el plugin `intlayerCompiler` :\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerCompiler } from \"vite-intlayer\";\n\nexport default defineConfig({\n plugins: [\n intlayer(),\n intlayerCompiler(), // Agrega el plugin del compilador\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # O npm run dev\n```\n\n```bash packageManager=\"pnpm\"\npnpm run build # O pnpm run dev\n```\n\n```bash packageManager=\"yarn\"\nyarn build # O yarn dev\n```\n\n```bash packageManager=\"bun\"\nbun run build # Or bun run dev\n```\n\n \n\n\n### Configuración de Git\n\nSe recomienda ignorar los archivos generados por Intlayer.\n\n```plaintext fileName=\".gitignore\"\n# Ignorar los archivos generados por Intlayer\n.intlayer\n```\n\n---\n\n### Ir Más Allá\n\n- **Editor Visual**: Integra el [Editor Visual de Intlayer](/es/doc/concept/editor) para editar las traducciones directamente desde la interfaz de usuario.\n- **CMS**: Externaliza la gestión de tu contenido usando el [CMS de Intlayer](/es/doc/concept/cms).\n","about":"Descubre cómo hacer que tu sitio web SvelteKit sea multilingüe. Sigue la documentación para internacionalizar (i18n) y traducir usando Server-Side Rendering (SSR).","url":"https://intlayer.org/es/doc/environment/sveltekit","datePublished":"20-11-2025","dateModified":"06-05-2026","keywords":"Internacionalización, Documentación, Intlayer, SvelteKit, JavaScript, SSR","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Desarrolladores, Gestores de Contenido"}}

Creación:2025-11-20Última actualización:2026-05-06

Ver la plantilla de aplicación en GitHub

Esta página tiene una plantilla de aplicación disponible.

Ver la aplicación de demostración

Esta página enlaza a una demo en vivo de la plantilla.

Referencia esta doc a tu asistente AI favorito

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Haz tu pregunta y obtén un resumen del documento referenciando esta página y el proveedor AI de tu elección

Historial de versiones

"Actualizar el uso de la API useIntlayer de Solid para el acceso directo a las propiedades"
v8.9.04/5/2026
"Agregar comando init"
v7.5.930/12/2025
"Historial inicial"
v7.1.1020/11/2025

El contenido de esta página ha sido traducido con una IA.

Ver la última versión del contenido original en inglés

Editar esta documentación

Si tienes una idea para mejorar esta documentación, no dudes en contribuir enviando una pull request en GitHub.

Enlace de GitHub a la documentación

Copiar

Copiar el Markdown del documento a la portapapeles

Traduce tu sitio web SvelteKit usando Intlayer | Internacionalización (i18n)

ide.intlayer.org

Tabla de Contenidos

¿Qué es Intlayer?

Intlayer es una biblioteca innovadora y de código abierto para internacionalización (i18n) diseñada para simplificar el soporte multilingüe en aplicaciones web modernas. Funciona perfectamente con las capacidades de Server-Side Rendering (SSR) de SvelteKit.

Con Intlayer, puedes:

Gestionar traducciones fácilmente usando diccionarios declarativos a nivel de componente.
Localizar dinámicamente metadatos, rutas y contenido.
Garantizar soporte para TypeScript con tipos autogenerados.
Aprovechar el SSR de SvelteKit para una internacionalización amigable con SEO.

Guía paso a paso para configurar Intlayer en una aplicación SvelteKit

Para comenzar, crea un nuevo proyecto SvelteKit. Aquí está la estructura final que crearemos:

bash

Copiar código

Copiar el código al portapapeles

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Paso 1: Instalar dependencias

Instala los paquetes necesarios usando npm:

bash

Copiar código

Copiar el código al portapapeles

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: El paquete principal de i18n.
svelte-intlayer: Proporciona context providers y stores para Svelte/SvelteKit.
vite-intlayer: El plugin de Vite para integrar las declaraciones de contenido con el proceso de build.

Paso 2: Configuración de tu proyecto

Crea un archivo de configuración en la raíz de tu proyecto:

intlayer.config.ts

Copiar código

Copiar el código al portapapeles

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Paso 3: Integra Intlayer en tu configuración de Vite

Actualiza tu vite.config.ts para incluir el plugin de Intlayer. Este plugin se encarga de la transpilación de tus archivos de contenido.

vite.config.ts

Copiar código

Copiar el código al portapapeles

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // el orden importa, Intlayer debe ir antes que SvelteKit});

Paso 4: Declara Tu Contenido

Crea tus archivos de declaración de contenido en cualquier lugar dentro de tu carpeta src (por ejemplo, src/lib/content o junto a tus componentes). Estos archivos definen el contenido traducible para tu aplicación usando la función t() para cada locale.

Paso 5: Utiliza Intlayer en Tus Componentes

Ahora puedes usar la función useIntlayer en cualquier componente Svelte. Esta devuelve una tienda reactiva que se actualiza automáticamente cuando cambia el locale. La función respetará automáticamente el locale actual (tanto durante SSR como en la navegación del lado del cliente).

Nota: useIntlayer devuelve una tienda de Svelte, por lo que necesitas usar el prefijo `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: Cómo traducir tu aplicación SvelteKit – Guía i18n 2026 description: Descubre cómo hacer que tu sitio web SvelteKit sea multilingüe. Sigue la documentación para internacionalizar (i18n) y traducir usando Server-Side Rendering (SSR). keywords:

Internacionalización
Documentación
Intlayer
SvelteKit
JavaScript
SSR slugs:
doc
environment
sveltekit applicationTemplate: https://github.com/aymericzip/intlayer-sveltekit-template history:
version: 7.1.10 date: 2025-11-20 changes: Historial inicial

Traduce tu sitio web SvelteKit usando Intlayer | Internacionalización (i18n)

Tabla de Contenidos

¿Qué es Intlayer?

Con Intlayer, puedes:

Gestionar traducciones fácilmente usando diccionarios declarativos a nivel de componente.
Localizar dinámicamente metadatos, rutas y contenido.
Garantizar soporte para TypeScript con tipos autogenerados.
Aprovechar el SSR de SvelteKit para una internacionalización amigable con SEO.

Guía paso a paso para configurar Intlayer en una aplicación SvelteKit

Para comenzar, crea un nuevo proyecto SvelteKit. Aquí está la estructura final que crearemos:

bash

Copiar código

Copiar el código al portapapeles

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Paso 1: Instalar dependencias

Instala los paquetes necesarios usando npm:

bash

Copiar código

Copiar el código al portapapeles

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: El paquete principal de i18n.
svelte-intlayer: Proporciona context providers y stores para Svelte/SvelteKit.
vite-intlayer: El plugin de Vite para integrar las declaraciones de contenido con el proceso de build.

Paso 2: Configuración de tu proyecto

Crea un archivo de configuración en la raíz de tu proyecto:

intlayer.config.ts

Copiar código

Copiar el código al portapapeles

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Paso 3: Integra Intlayer en tu configuración de Vite

Actualiza tu vite.config.ts para incluir el plugin de Intlayer. Este plugin se encarga de la transpilación de tus archivos de contenido.

vite.config.ts

Copiar código

Copiar el código al portapapeles

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // el orden importa, Intlayer debe ir antes que SvelteKit});

Paso 4: Declara Tu Contenido

Paso 5: Utiliza Intlayer en Tus Componentes

para acceder a su valor reactivo (por ejemplo, $content.title).

src/lib/components/Component.svelte

Copiar código

Copiar el código al portapapeles

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" corresponde a la clave definida en el Paso 4  const content = useIntlayer("hero-section");</script><!-- Renderizar contenido como contenido simple  --><h1>{$content.title}</h1><!-- Para renderizar el contenido editable usando el editor --><h1>{@const Title = $content.title}<Title /></h1><!-- Para renderizar el contenido como una cadena --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(Opcional) Paso 6: Configurar el enrutamiento

Los siguientes pasos muestran cómo configurar el enrutamiento basado en el locale en SvelteKit. Esto permite que tus URLs incluyan el prefijo del locale (por ejemplo, /en/about, /fr/about) para mejorar el SEO y la experiencia del usuario.

bash

Copiar código

Copiar el código al portapapeles

.└─── src    ├── app.d.ts                  # Definir el tipo de locale    ├── hooks.server.ts           # Gestionar el enrutamiento del locale    ├── lib    │   └── getLocale.ts          # Comprobar el locale desde el header, cookies    ├── params    │   └── locale.ts             # Definir el parámetro locale    └── routes        ├── [[locale=locale]]     # Envolver en un grupo de rutas para establecer el locale        │   ├── +layout.svelte    # Diseño local para la ruta        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Diseño raíz para fuentes y estilos globales

Paso 7: Manejar la detección del locale en el servidor (Hooks)

En SvelteKit, el servidor necesita conocer el locale del usuario para renderizar el contenido correcto durante SSR. Usamos hooks.server.ts para detectar el locale desde la URL o las cookies.

Crea o modifica src/hooks.server.ts:

src/hooks.server.ts

Copiar código

Copiar el código al portapapeles

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // Verifica si la ruta actual ya comienza con una locale (ej. /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Si NO hay una locale presente en la URL (ej. el usuario visita "/"), redirígelo  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Redirección temporal    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

Luego, crea un helper para obtener la locale del usuario desde el evento de la solicitud:

src/lib/getLocale.ts

Copiar código

Copiar el código al portapapeles

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Obtiene la configuración regional del usuario a partir del evento de la solicitud. * Esta función se utiliza en el hook `handle` en `src/hooks.server.ts`. * * Primero intenta obtener la configuración regional desde el almacenamiento de Intlayer (cookies o encabezados personalizados). * Si no se encuentra la configuración regional, recurre a la negociación "Accept-Language" del navegador. * * @param event - El evento de solicitud de SvelteKit * @returns La configuración regional del usuario */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Intentar obtener la configuración regional desde el almacenamiento de Intlayer (Cookies o encabezados)  const storedLocale = getLocaleFromStorage({    // Acceso a cookies en SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Acceso a headers en SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Recurso a la negociación "Accept-Language" del navegador  const negotiatorHeaders: Record<string, string> = {};  // Convertir el objeto Headers de SvelteKit a un Record<string, string> plano  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Comprobar la locale a partir del header `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Devolver la locale por defecto si no se encuentra ninguna coincidencia  return defaultLocale;};

getLocaleFromStorage verificará la localidad desde el encabezado o la cookie dependiendo de tu configuración. Consulta Configuración para más detalles.

La función localeDetector procesará el encabezado Accept-Language y devolverá la mejor coincidencia.

Si la localidad no está configurada, queremos devolver un error 404. Para facilitarlo, podemos crear una función match para verificar si la localidad es válida:

/src/params/locale.ts

Copiar código

Copiar el código al portapapeles

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

Nota: Asegúrate de que tu src/app.d.ts incluya la definición de la localidad:
typescript
Copiar código
Copiar el código al portapapeles
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

Para el archivo +layout.svelte, podemos eliminar todo, para mantener solo contenido estático, no relacionado con i18n:

src/+layout.svelte

Copiar código

Copiar el código al portapapeles

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

Luego, crea una nueva página y layout bajo el grupo [[locale=locale]]:

src/routes/[[locale=locale]]/+layout.ts

Copiar código

Copiar el código al portapapeles

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Usa el tipo genérico Loadexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

src/routes/[[locale=locale]]/+layout.svelte

Copiar código

Copiar el código al portapapeles

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // Inicializar Intlayer con la locale de la ruta  $effect(() => {      setupIntlayer(data.locale);  });    // Usar el diccionario de contenido del layout    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

src/routes/[[locale=locale]]/+page.ts

Copiar código

Copiar el código al portapapeles

export const prerender = true;

src/routes/[[locale=locale]]/+page.svelte

Copiar código

Copiar el código al portapapeles

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Usar el diccionario de contenido de la página principal    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(Opcional) Paso 8: Enlaces internacionalizados

Para SEO, se recomienda prefijar tus rutas con la locale (por ejemplo, /en/about, /fr/about). Este componente automáticamente prefija cualquier enlace con la locale actual.

src/lib/components/LocalizedLink.svelte

Copiar código

Copiar el código al portapapeles

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Ayudante para prefijar la URL con la locale actual  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

Si usas goto de SvelteKit, puedes usar la misma lógica con getLocalizedUrl para navegar a la URL localizada:

typescript

Copiar código

Copiar el código al portapapeles

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Navega a /en/about o /fr/about dependiendo del locale

(Opcional) Paso 9: Selector de idioma

Para permitir a los usuarios cambiar de idioma, actualiza la URL.

src/lib/components/LanguageSwitcher.svelte

Copiar código

Copiar el código al portapapeles

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // Establecerá la locale en el store y activará onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(Opcional) Paso 10: Añadir proxy backend

Para añadir un proxy backend a tu aplicación SvelteKit, puedes usar la función intlayerProxy proporcionada por el plugin vite-intlayer. Este plugin detectará automáticamente la mejor locale para el usuario basándose en la URL, cookies y preferencias de idioma del navegador.

vite.config.ts

Copiar código

Copiar el código al portapapeles

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

(Opcional) Paso 11: Configurar el editor / CMS de intlayer

Para configurar el editor de intlayer, debes seguir la documentación del editor de intlayer.

Para configurar el CMS de intlayer, debes seguir la documentación del CMS de intlayer.

Para poder visualizar el selector del editor intlayer, deberás usar la sintaxis de componente en tu contenido intlayer.

Component.svelte

Copiar código

Copiar el código al portapapeles

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Renderizar contenido como contenido simple -->  <h1>{$content.title}</h1>  <!-- Renderizar contenido como un componente (requerido por el editor) -->  {@const Component = $content.component}<Component /></div>

(Opcional) Paso 12 : Extraer el contenido de tus componentes

Si tienes una base de código existente, transformar miles de archivos puede llevar mucho tiempo.

Para facilitar este proceso, Intlayer propone un compilador / extractor para transformar tus componentes y extraer el contenido.

Para configurarlo, puedes agregar una sección compiler en tu archivo intlayer.config.ts :

intlayer.config.ts

Copiar código

Copiar el código al portapapeles

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Resto de tu configuración
  compiler: {
    /**
     * Indica si el compilador debe estar habilitado.
     */
    enabled: true,

    /**
     * Define la ruta de los archivos de salida
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Indica si los componentes deben guardarse después de ser transformados. De esa manera, el compilador se puede ejecutar solo una vez para transformar la aplicación y luego se puede eliminar.
     */
    saveComponents: false,

    /**
     * Prefijo de clave de diccionario
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

Ejecuta el extractor para transformar tus componentes y extraer el contenido

bash

Copiar código

Copiar el código al portapapeles

npx intlayer extract

Actualiza tu archivo vite.config.ts para incluir el plugin intlayerCompiler :

vite.config.ts

Copiar código

Copiar el código al portapapeles

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Agrega el plugin del compilador ],});

bash

Copiar código

Copiar el código al portapapeles

npm run build # O npm run dev

Configuración de Git

Se recomienda ignorar los archivos generados por Intlayer.

.gitignore

Copiar código

Copiar el código al portapapeles

# Ignorar los archivos generados por Intlayer.intlayer

Ir Más Allá

Editor Visual: Integra el Editor Visual de Intlayer para editar las traducciones directamente desde la interfaz de usuario.
CMS: Externaliza la gestión de tu contenido usando el CMS de Intlayer.

Vite y Svelte

Vite y Preact

\n\n\n

{$content.title}

\n\n

\n\t

\n\t\t{$homeContent.title}\n\t

\n {\n e.preventDefault();\n setLocale(localeEl); // Establecerá la locale en el store y activará onLocaleChange\n }}\n class:active={$locale === localeEl}\n >\n {getLocaleName(localeEl)}\n \n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

Creación:2025-11-20Última actualización:2026-05-06

Ver la plantilla de aplicación en GitHub

Esta página tiene una plantilla de aplicación disponible.

Ver la aplicación de demostración

Esta página enlaza a una demo en vivo de la plantilla.

Referencia esta doc a tu asistente AI favorito

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Haz tu pregunta y obtén un resumen del documento referenciando esta página y el proveedor AI de tu elección

Historial de versiones

"Actualizar el uso de la API useIntlayer de Solid para el acceso directo a las propiedades"
v8.9.04/5/2026
"Agregar comando init"
v7.5.930/12/2025
"Historial inicial"
v7.1.1020/11/2025

El contenido de esta página ha sido traducido con una IA.

Ver la última versión del contenido original en inglés

Editar esta documentación

Si tienes una idea para mejorar esta documentación, no dudes en contribuir enviando una pull request en GitHub.

Enlace de GitHub a la documentación

Copiar

Copiar el Markdown del documento a la portapapeles

Traduce tu sitio web SvelteKit usando Intlayer | Internacionalización (i18n)

ide.intlayer.org

Tabla de Contenidos

¿Qué es Intlayer?

Con Intlayer, puedes:

Gestionar traducciones fácilmente usando diccionarios declarativos a nivel de componente.
Localizar dinámicamente metadatos, rutas y contenido.
Garantizar soporte para TypeScript con tipos autogenerados.
Aprovechar el SSR de SvelteKit para una internacionalización amigable con SEO.

Guía paso a paso para configurar Intlayer en una aplicación SvelteKit

Para comenzar, crea un nuevo proyecto SvelteKit. Aquí está la estructura final que crearemos:

bash

Copiar código

Copiar el código al portapapeles

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Paso 1: Instalar dependencias

Instala los paquetes necesarios usando npm:

bash

Copiar código

Copiar el código al portapapeles

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: El paquete principal de i18n.
svelte-intlayer: Proporciona context providers y stores para Svelte/SvelteKit.
vite-intlayer: El plugin de Vite para integrar las declaraciones de contenido con el proceso de build.

Paso 2: Configuración de tu proyecto

Crea un archivo de configuración en la raíz de tu proyecto:

intlayer.config.ts

Copiar código

Copiar el código al portapapeles

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Paso 3: Integra Intlayer en tu configuración de Vite

Actualiza tu vite.config.ts para incluir el plugin de Intlayer. Este plugin se encarga de la transpilación de tus archivos de contenido.

vite.config.ts

Copiar código

Copiar el código al portapapeles

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // el orden importa, Intlayer debe ir antes que SvelteKit});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // el orden importa, Intlayer debe ir antes que SvelteKit});

Paso 4: Declara Tu Contenido

Paso 5: Utiliza Intlayer en Tus Componentes

Nota: useIntlayer devuelve una tienda de Svelte, por lo que necesitas usar el prefijo `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: Cómo traducir tu aplicación SvelteKit – Guía i18n 2026 description: Descubre cómo hacer que tu sitio web SvelteKit sea multilingüe. Sigue la documentación para internacionalizar (i18n) y traducir usando Server-Side Rendering (SSR). keywords:

Internacionalización
Documentación
Intlayer
SvelteKit
JavaScript
SSR slugs:
doc
environment
sveltekit applicationTemplate: https://github.com/aymericzip/intlayer-sveltekit-template history:
version: 7.1.10 date: 2025-11-20 changes: Historial inicial

Traduce tu sitio web SvelteKit usando Intlayer | Internacionalización (i18n)

Tabla de Contenidos

¿Qué es Intlayer?

Con Intlayer, puedes:

Gestionar traducciones fácilmente usando diccionarios declarativos a nivel de componente.
Localizar dinámicamente metadatos, rutas y contenido.
Garantizar soporte para TypeScript con tipos autogenerados.
Aprovechar el SSR de SvelteKit para una internacionalización amigable con SEO.

Guía paso a paso para configurar Intlayer en una aplicación SvelteKit

Para comenzar, crea un nuevo proyecto SvelteKit. Aquí está la estructura final que crearemos:

bash

Copiar código

Copiar el código al portapapeles

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Paso 1: Instalar dependencias

Instala los paquetes necesarios usando npm:

bash

Copiar código

Copiar el código al portapapeles

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: El paquete principal de i18n.
svelte-intlayer: Proporciona context providers y stores para Svelte/SvelteKit.
vite-intlayer: El plugin de Vite para integrar las declaraciones de contenido con el proceso de build.

Paso 2: Configuración de tu proyecto

Crea un archivo de configuración en la raíz de tu proyecto:

intlayer.config.ts

Copiar código

Copiar el código al portapapeles

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Paso 3: Integra Intlayer en tu configuración de Vite

Actualiza tu vite.config.ts para incluir el plugin de Intlayer. Este plugin se encarga de la transpilación de tus archivos de contenido.

vite.config.ts

Copiar código

Copiar el código al portapapeles

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // el orden importa, Intlayer debe ir antes que SvelteKit});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // el orden importa, Intlayer debe ir antes que SvelteKit});

Paso 4: Declara Tu Contenido

Paso 5: Utiliza Intlayer en Tus Componentes

para acceder a su valor reactivo (por ejemplo, $content.title).

src/lib/components/Component.svelte

Copiar código

Copiar el código al portapapeles

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" corresponde a la clave definida en el Paso 4  const content = useIntlayer("hero-section");</script><!-- Renderizar contenido como contenido simple  --><h1>{$content.title}</h1><!-- Para renderizar el contenido editable usando el editor --><h1>{@const Title = $content.title}<Title /></h1><!-- Para renderizar el contenido como una cadena --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" corresponde a la clave definida en el Paso 4  const content = useIntlayer("hero-section");</script><!-- Renderizar contenido como contenido simple  --><h1>{$content.title}</h1><!-- Para renderizar el contenido editable usando el editor --><h1>{@const Title = $content.title}<Title /></h1><!-- Para renderizar el contenido como una cadena --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(Opcional) Paso 6: Configurar el enrutamiento

bash

Copiar código

Copiar el código al portapapeles

.└─── src    ├── app.d.ts                  # Definir el tipo de locale    ├── hooks.server.ts           # Gestionar el enrutamiento del locale    ├── lib    │   └── getLocale.ts          # Comprobar el locale desde el header, cookies    ├── params    │   └── locale.ts             # Definir el parámetro locale    └── routes        ├── [[locale=locale]]     # Envolver en un grupo de rutas para establecer el locale        │   ├── +layout.svelte    # Diseño local para la ruta        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Diseño raíz para fuentes y estilos globales

.└─── src    ├── app.d.ts                  # Definir el tipo de locale    ├── hooks.server.ts           # Gestionar el enrutamiento del locale    ├── lib    │   └── getLocale.ts          # Comprobar el locale desde el header, cookies    ├── params    │   └── locale.ts             # Definir el parámetro locale    └── routes        ├── [[locale=locale]]     # Envolver en un grupo de rutas para establecer el locale        │   ├── +layout.svelte    # Diseño local para la ruta        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Diseño raíz para fuentes y estilos globales

Paso 7: Manejar la detección del locale en el servidor (Hooks)

En SvelteKit, el servidor necesita conocer el locale del usuario para renderizar el contenido correcto durante SSR. Usamos hooks.server.ts para detectar el locale desde la URL o las cookies.

Crea o modifica src/hooks.server.ts:

src/hooks.server.ts

Copiar código

Copiar el código al portapapeles

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // Verifica si la ruta actual ya comienza con una locale (ej. /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Si NO hay una locale presente en la URL (ej. el usuario visita "/"), redirígelo  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Redirección temporal    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // Verifica si la ruta actual ya comienza con una locale (ej. /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Si NO hay una locale presente en la URL (ej. el usuario visita "/"), redirígelo  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Redirección temporal    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

Luego, crea un helper para obtener la locale del usuario desde el evento de la solicitud:

src/lib/getLocale.ts

Copiar código

Copiar el código al portapapeles

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Obtiene la configuración regional del usuario a partir del evento de la solicitud. * Esta función se utiliza en el hook `handle` en `src/hooks.server.ts`. * * Primero intenta obtener la configuración regional desde el almacenamiento de Intlayer (cookies o encabezados personalizados). * Si no se encuentra la configuración regional, recurre a la negociación "Accept-Language" del navegador. * * @param event - El evento de solicitud de SvelteKit * @returns La configuración regional del usuario */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Intentar obtener la configuración regional desde el almacenamiento de Intlayer (Cookies o encabezados)  const storedLocale = getLocaleFromStorage({    // Acceso a cookies en SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Acceso a headers en SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Recurso a la negociación "Accept-Language" del navegador  const negotiatorHeaders: Record<string, string> = {};  // Convertir el objeto Headers de SvelteKit a un Record<string, string> plano  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Comprobar la locale a partir del header `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Devolver la locale por defecto si no se encuentra ninguna coincidencia  return defaultLocale;};

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Obtiene la configuración regional del usuario a partir del evento de la solicitud. * Esta función se utiliza en el hook `handle` en `src/hooks.server.ts`. * * Primero intenta obtener la configuración regional desde el almacenamiento de Intlayer (cookies o encabezados personalizados). * Si no se encuentra la configuración regional, recurre a la negociación "Accept-Language" del navegador. * * @param event - El evento de solicitud de SvelteKit * @returns La configuración regional del usuario */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Intentar obtener la configuración regional desde el almacenamiento de Intlayer (Cookies o encabezados)  const storedLocale = getLocaleFromStorage({    // Acceso a cookies en SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Acceso a headers en SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Recurso a la negociación "Accept-Language" del navegador  const negotiatorHeaders: Record<string, string> = {};  // Convertir el objeto Headers de SvelteKit a un Record<string, string> plano  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Comprobar la locale a partir del header `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Devolver la locale por defecto si no se encuentra ninguna coincidencia  return defaultLocale;};

getLocaleFromStorage verificará la localidad desde el encabezado o la cookie dependiendo de tu configuración. Consulta Configuración para más detalles.

La función localeDetector procesará el encabezado Accept-Language y devolverá la mejor coincidencia.

Si la localidad no está configurada, queremos devolver un error 404. Para facilitarlo, podemos crear una función match para verificar si la localidad es válida:

/src/params/locale.ts

Copiar código

Copiar el código al portapapeles

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

Nota: Asegúrate de que tu src/app.d.ts incluya la definición de la localidad:
typescript
Copiar código
Copiar el código al portapapeles
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

Para el archivo +layout.svelte, podemos eliminar todo, para mantener solo contenido estático, no relacionado con i18n:

src/+layout.svelte

Copiar código

Copiar el código al portapapeles

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

Luego, crea una nueva página y layout bajo el grupo [[locale=locale]]:

src/routes/[[locale=locale]]/+layout.ts

Copiar código

Copiar el código al portapapeles

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Usa el tipo genérico Loadexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Usa el tipo genérico Loadexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

src/routes/[[locale=locale]]/+layout.svelte

Copiar código

Copiar el código al portapapeles

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // Inicializar Intlayer con la locale de la ruta  $effect(() => {      setupIntlayer(data.locale);  });    // Usar el diccionario de contenido del layout    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // Inicializar Intlayer con la locale de la ruta  $effect(() => {      setupIntlayer(data.locale);  });    // Usar el diccionario de contenido del layout    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

src/routes/[[locale=locale]]/+page.ts

Copiar código

Copiar el código al portapapeles

export const prerender = true;

export const prerender = true;

src/routes/[[locale=locale]]/+page.svelte

Copiar código

Copiar el código al portapapeles

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Usar el diccionario de contenido de la página principal    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Usar el diccionario de contenido de la página principal    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(Opcional) Paso 8: Enlaces internacionalizados

Para SEO, se recomienda prefijar tus rutas con la locale (por ejemplo, /en/about, /fr/about). Este componente automáticamente prefija cualquier enlace con la locale actual.

src/lib/components/LocalizedLink.svelte

Copiar código

Copiar el código al portapapeles

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Ayudante para prefijar la URL con la locale actual  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Ayudante para prefijar la URL con la locale actual  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

Si usas goto de SvelteKit, puedes usar la misma lógica con getLocalizedUrl para navegar a la URL localizada:

typescript

Copiar código

Copiar el código al portapapeles

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Navega a /en/about o /fr/about dependiendo del locale

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Navega a /en/about o /fr/about dependiendo del locale

(Opcional) Paso 9: Selector de idioma

Para permitir a los usuarios cambiar de idioma, actualiza la URL.

src/lib/components/LanguageSwitcher.svelte

Copiar código

Copiar el código al portapapeles

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // Establecerá la locale en el store y activará onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // Establecerá la locale en el store y activará onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(Opcional) Paso 10: Añadir proxy backend

vite.config.ts

Copiar código

Copiar el código al portapapeles

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

(Opcional) Paso 11: Configurar el editor / CMS de intlayer

Para configurar el editor de intlayer, debes seguir la documentación del editor de intlayer.

Para configurar el CMS de intlayer, debes seguir la documentación del CMS de intlayer.

Para poder visualizar el selector del editor intlayer, deberás usar la sintaxis de componente en tu contenido intlayer.

Component.svelte

Copiar código

Copiar el código al portapapeles

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Renderizar contenido como contenido simple -->  <h1>{$content.title}</h1>  <!-- Renderizar contenido como un componente (requerido por el editor) -->  {@const Component = $content.component}<Component /></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Renderizar contenido como contenido simple -->  <h1>{$content.title}</h1>  <!-- Renderizar contenido como un componente (requerido por el editor) -->  {@const Component = $content.component}<Component /></div>

(Opcional) Paso 12 : Extraer el contenido de tus componentes

Si tienes una base de código existente, transformar miles de archivos puede llevar mucho tiempo.

Para facilitar este proceso, Intlayer propone un compilador / extractor para transformar tus componentes y extraer el contenido.

Para configurarlo, puedes agregar una sección compiler en tu archivo intlayer.config.ts :

intlayer.config.ts

Copiar código

Copiar el código al portapapeles

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Resto de tu configuración
  compiler: {
    /**
     * Indica si el compilador debe estar habilitado.
     */
    enabled: true,

    /**
     * Define la ruta de los archivos de salida
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Indica si los componentes deben guardarse después de ser transformados. De esa manera, el compilador se puede ejecutar solo una vez para transformar la aplicación y luego se puede eliminar.
     */
    saveComponents: false,

    /**
     * Prefijo de clave de diccionario
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

Ejecuta el extractor para transformar tus componentes y extraer el contenido

bash

Copiar código

Copiar el código al portapapeles

npx intlayer extract

npx intlayer extract

Actualiza tu archivo vite.config.ts para incluir el plugin intlayerCompiler :

vite.config.ts

Copiar código

Copiar el código al portapapeles

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Agrega el plugin del compilador ],});

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Agrega el plugin del compilador ],});

bash

Copiar código

Copiar el código al portapapeles

npm run build # O npm run dev

npm run build # O npm run dev

Configuración de Git

Se recomienda ignorar los archivos generados por Intlayer.

.gitignore

Copiar código

Copiar el código al portapapeles

# Ignorar los archivos generados por Intlayer.intlayer

# Ignorar los archivos generados por Intlayer.intlayer

Ir Más Allá

Editor Visual: Integra el Editor Visual de Intlayer para editar las traducciones directamente desde la interfaz de usuario.
CMS: Externaliza la gestión de tu contenido usando el CMS de Intlayer.

Vite y Svelte

Vite y Preact