\n\n\n```\n\n \n \n\nWith `svelte-intlayer`, you can use translations in Svelte components. The hook returns a Svelte store. Here's an example:\n\n```svelte fileName=\"**/*.svelte\"\n\n\n

\n

{$content.welcomeMessage}

\n

\n```\n\n \n \n\nWith `preact-intlayer`, you can use translations in Preact components. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { FC } from \"preact\";\nimport { useIntlayer } from \"preact-intlayer\";\n\nconst MyComponent: FC = () => {\n const content = useIntlayer(\"multi_lang\");\n\n return (\n

\n

{content.welcomeMessage}

\n

\n );\n};\n\nexport default MyComponent;\n```\n\n \n \n\nWith `solid-intlayer`, you can use translations in SolidJS components. Here's an example:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { Component } from \"solid-js\";\nimport { useIntlayer } from \"solid-intlayer\";\n\nconst MyComponent: Component = () => {\n const content = useIntlayer(\"multi_lang\");\n\n return (\n

\n

{content.welcomeMessage}

\n

\n );\n};\n\nexport default MyComponent;\n```\n\n \n \n\nWith `angular-intlayer`, you can use translations in Angular components. Here's an example:\n\n```typescript fileName=\"app.component.ts\" codeFormat=\"typescript\"\nimport { Component } from \"@angular/core\";\nimport { useIntlayer } from \"angular-intlayer\";\n\n@Component({\n selector: \"app-my-component\",\n template: `\n

\n

{{ content().welcomeMessage }}

\n

\n `,\n})\nexport class MyComponent {\n content = useIntlayer(\"multi_lang\");\n}\n```\n\n \n \n\nWith `vanilla-intlayer`, you can use translations by subscribing to content changes. Here's an example:\n\n```typescript fileName=\"**/*.ts\" codeFormat={[\"typescript\", \"esm\"]}\nimport { installIntlayer, useIntlayer } from \"vanilla-intlayer\";\n\ninstallIntlayer();\n\nconst content = useIntlayer(\"multi_lang\").onChange((newContent) => {\n document.getElementById(\"welcome-message\")!.textContent = String(\n newContent.welcomeMessage\n );\n});\n\n// Initial render\ndocument.getElementById(\"welcome-message\")!.textContent = String(\n content.welcomeMessage\n);\n```\n\n \n\n\n## Objetos de Contenido Personalizados\n\n`intlayer` soporta objetos de contenido personalizados para la traducción, permitiéndole definir estructuras más complejas mientras asegura la seguridad de tipos. Aquí hay un ejemplo con un objeto personalizado:\n\n```typescript fileName=\"**/*.content.ts\" contentDeclarationFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { t, type Dictionary } from \"intlayer\";\n\ninterface ICustomContent {\n title: string;\n content: string;\n}\n\nconst customContent = {\n key: \"custom_content\",\n content: {\n profileText: t({\n en: {\n title: \"Page Title\",\n content: \"Page Content\",\n },\n fr: {\n title: \"Titre de la Page\",\n content: \"Contenu de la Page\",\n },\n es: {\n title: \"Título de la Página\",\n content: \"Contenido de la Página\",\n },\n }),\n },\n} satisfies Dictionary;\n\nexport default customContent;\n```\n\n```json fileName=\"**/*.content.json\" contentDeclarationFormat=\"json\"\n{\n \"$schema\": \"https://intlayer.org/schema.json\",\n \"key\": \"custom_content\",\n \"content\": {\n \"profileText\": {\n \"nodeType\": \"translation\",\n \"translation\": {\n \"en\": {\n \"title\": \"Título de la Página\",\n \"content\": \"Contenido de la Página\"\n },\n \"fr\": {\n \"title\": \"Titre de la Page\",\n \"content\": \"Contenu de la Page\"\n },\n \"es\": {\n \"title\": \"Título de la Página\",\n \"content\": \"Contenido de la Página\"\n }\n }\n }\n }\n}\n```\n","description":"Descubre cómo declarar y usar traducción en tu sitio web multilingüe. Sigue los pasos en esta documentación en línea para configurar tu proyecto en pocos minutos.","url":"https://intlayer.org/es/doc/concept/content/translation","datePublished":"2024-08-11","dateModified":"2025-06-29","version":"5.5.10","keywords":"Traducción, Internacionalización, Documentación, Intlayer, Next.js, JavaScript, React","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Desarrolladores, Gestores de Contenido"}}

Autor:

Creación:2024-08-11Última actualización:2025-06-29

Referencia esta doc a tu asistente AI favoritoChatGPT 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

Este documento está desactualizado, la versión base se actualizó el 23 de agosto de 2025.

Ir a la documentación en inglés

Historial de versiones

"Historial inicial"
v5.5.1029/6/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

Traducción

Definiendo Traducciones

La función t en intlayer te permite declarar contenido en múltiples idiomas. Esta función garantiza la seguridad de tipos, generando un error si falta alguna traducción, lo cual es especialmente útil en entornos TypeScript.

Aquí tienes un ejemplo de cómo declarar contenido con traducciones.

**/*.content.ts

Copiar código

Copiar el código al portapapeles

import { t, type Dictionary } from "intlayer";

interface Content {
  welcomeMessage: string;
}

export default {
  key: "multi_lang",
  content: {
    welcomeMessage: t({
      en: "Welcome to our application",
      fr: "Bienvenue dans notre application",
      es: "Bienvenido a nuestra aplicación",
    }),
  },
} satisfies Dictionary<Content>;

Configuración de Locales

Para asegurar un manejo adecuado de las traducciones, puedes configurar los locales aceptados en intlayer.config.ts. Esta configuración te permite definir los idiomas que tu aplicación soporta:

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],
  },
};

export default config;

Uso de Traducciones en Componentes React

With react-intlayer, you can use translations in React components. Here's an example:

**/*.tsx

Copiar código

Copiar el código al portapapeles

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const MyComponent: FC = () => {
const content = useIntlayer("multi_lang");

return (
  <div>
    <p>{content.welcomeMessage}</p>
  </div>
);
};

export default MyComponent;

This component fetches the corresponding translation based on the current locale set in your application.

With next-intlayer, you can use translations in React Server Components or Client Components. Here's an example in a Client Component:

**/*.tsx

Copiar código

Copiar el código al portapapeles

"use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const MyComponent: FC = () => {
const content = useIntlayer("multi_lang");

return (
  <div>
    <p>{content.welcomeMessage}</p>
  </div>
);
};

export default MyComponent;

With vue-intlayer, you can use translations in Vue components. Here's an example:

**/*.vue

Copiar código

Copiar el código al portapapeles

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const content = useIntlayer("multi_lang");</script><template><div>  <p>{{ content.welcomeMessage }}</p></div></template>

With svelte-intlayer, you can use translations in Svelte components. The hook returns a Svelte store. Here's an example:

**/*.svelte

Copiar código

Copiar el código al portapapeles

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("multi_lang");</script><div><p>{$content.welcomeMessage}</p></div>

With preact-intlayer, you can use translations in Preact components. Here's an example:

**/*.tsx

Copiar código

Copiar el código al portapapeles

import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const MyComponent: FC = () => {
const content = useIntlayer("multi_lang");

return (
  <div>
    <p>{content.welcomeMessage}</p>
  </div>
);
};

export default MyComponent;

With solid-intlayer, you can use translations in SolidJS components. Here's an example:

**/*.tsx

Copiar código

Copiar el código al portapapeles

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const MyComponent: Component = () => {
const content = useIntlayer("multi_lang");

return (
  <div>
    <p>{content.welcomeMessage}</p>
  </div>
);
};

export default MyComponent;

With angular-intlayer, you can use translations in Angular components. Here's an example:

app.component.ts

Copiar código

Copiar el código al portapapeles

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-my-component",template: `  <div>    <p>{{ content().welcomeMessage }}</p>  </div>`,})export class MyComponent {content = useIntlayer("multi_lang");}

With vanilla-intlayer, you can use translations by subscribing to content changes. Here's an example:

**/*.ts

Copiar código

Copiar el código al portapapeles

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("multi_lang").onChange((newContent) => {
document.getElementById("welcome-message")!.textContent = String(
  newContent.welcomeMessage
);
});

// Initial render
document.getElementById("welcome-message")!.textContent = String(
content.welcomeMessage
);

Objetos de Contenido Personalizados

intlayer soporta objetos de contenido personalizados para la traducción, permitiéndole definir estructuras más complejas mientras asegura la seguridad de tipos. Aquí hay un ejemplo con un objeto personalizado:

**/*.content.ts

Copiar código

Copiar el código al portapapeles

import { t, type Dictionary } from "intlayer";

interface ICustomContent {
  title: string;
  content: string;
}

const customContent = {
  key: "custom_content",
  content: {
    profileText: t<ICustomContent>({
      en: {
        title: "Page Title",
        content: "Page Content",
      },
      fr: {
        title: "Titre de la Page",
        content: "Contenu de la Page",
      },
      es: {
        title: "Título de la Página",
        content: "Contenido de la Página",
      },
    }),
  },
} satisfies Dictionary;

export default customContent;

Declaración de contenido Plural