\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## Configuration for Locales\n\nTo ensure proper translation handling, you can configure the accepted locales in `intlayer.config.ts`. This configuration allows you to define the languages that your application supports:\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { Locales, type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n internationalization: {\n locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],\n },\n};\n\nexport default config;\n```\n\n## Using Translations in React Components\n\n\n \n\nWith `react-intlayer`, you can use translations in React components. Here's an example:\n\n```jsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\nimport type { FC } from \"react\";\nimport { useIntlayer } from \"react-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\nThis component fetches the corresponding translation based on the current locale set in your application.\n\n \n \n\nWith `next-intlayer`, you can use translations in React Server Components or Client Components. Here's an example in a Client Component:\n\n```tsx fileName=\"**/*.tsx\" codeFormat={[\"typescript\", \"esm\"]}\n\"use client\";\n\nimport type { FC } from \"react\";\nimport { useIntlayer } from \"next-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 `vue-intlayer`, you can use translations in Vue components. Here's an example:\n\n```vue fileName=\"**/*.vue\"\n\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## Custom Content Objects\n\n`intlayer` supports custom content objects for translation, allowing you to define more complex structures while ensuring type safety. Here's an example with a custom object:\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-GB\": {\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 }\n}\n```\n","description":"Discover how to declare and use translation in your multilingual website. Follow the steps in this online documentation to set up your project in a few minutes.","url":"https://intlayer.org/en-GB/doc/concept/content/translation","datePublished":"2024-08-11","dateModified":"2025-06-29","version":"5.5.10","keywords":"Translation, Internationalisation, Documentation, Intlayer, Next.js, JavaScript, React","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Developers, Content Managers"}}

Author:

Creation:2024-08-11Last update:2025-06-29

Reference this doc to your favorite AI assistantChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

Ask your question and get a summary of the document by referencing this page and the AI provider of your choice

This doc is out of date, the base version has been updated on 23 August 2025.

Go to English doc

Version History

"Init history"
v5.5.1029/06/2025

The content of this page was translated using an AI.

See the last version of the original content in English

Edit this doc

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

Copy

Copy doc Markdown to clipboard

Translation

Defining Translations

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

**/*.tsx

Copy code

Copy the code to the clipboard

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

Copy code

Copy the code to the clipboard

"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

Copy code

Copy the code to the clipboard

<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

Copy code

Copy the code to the clipboard

<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

Copy code

Copy the code to the clipboard

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

Copy code

Copy the code to the clipboard

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

Copy code

Copy the code to the clipboard

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

Copy code

Copy the code to the clipboard

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
);

Configuration for Locales

To ensure proper translation handling, you can configure the accepted locales in intlayer.config.ts. This configuration allows you to define the languages that your application supports:

intlayer.config.ts

Copy code

Copy the code to the clipboard

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  },
};

export default config;

Using Translations in React Components

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

**/*.tsx

Copy code

Copy the code to the clipboard

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

Copy code

Copy the code to the clipboard

"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

Copy code

Copy the code to the clipboard

<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

Copy code

Copy the code to the clipboard

<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

Copy code

Copy the code to the clipboard

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

Copy code

Copy the code to the clipboard

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

Copy code

Copy the code to the clipboard

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

Copy code

Copy the code to the clipboard

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
);

Custom Content Objects

intlayer supports custom content objects for translation, allowing you to define more complex structures while ensuring type safety. Here's an example with a custom object:

**/*.content.ts

Copy code

Copy the code to the clipboard

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;

Content Declaration Plural