Autor:

Criação:2024-08-11Última atualização:2025-06-29

Referência esta documentação ao seu assistente AI favorito

Google AI mode Gemini

Perplexity Mistral

Faça sua pergunta e obtenha um resumo do documento referenciando esta página e o provedor AI de sua escolha

Este documento está desatualizado, a versão base foi atualizada em 23 de agosto de 2025.

Ir para a documentação em inglês

Histórico de versões

"Histórico inicial"
v5.5.1029/06/2025

O conteúdo desta página foi traduzido com uma IA.

Veja a última versão do conteúdo original em inglês

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

Tradução

Definindo Traduções

A função t em intlayer permite que você declare conteúdo em múltiplos idiomas. Essa função garante segurança de tipos, gerando um erro caso alguma tradução esteja faltando, o que é particularmente útil em ambientes TypeScript.

Aqui está um exemplo de como declarar conteúdo com traduções.

**/*.content.ts

Copiar código

Copiar o código para a área de transferência

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

Configuração para Locales

Para garantir o manuseio adequado das traduções, você pode configurar os locales aceitos em intlayer.config.ts. Essa configuração permite definir os idiomas que sua aplicação suporta:

intlayer.config.ts

Copiar código

Copiar o código para a área de transferência

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

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

export default config;

Usando Traduções em Componentes React

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

**/*.tsx

Copiar código

Copiar o código para a área de transferência

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 o código para a área de transferência

"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 o código para a área de transferência

<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 o código para a área de transferência

<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 o código para a área de transferência

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 o código para a área de transferência

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 o código para a área de transferência

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 o código para a área de transferência

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 Conteúdo Personalizados

intlayer suporta objetos de conteúdo personalizados para tradução, permitindo que você defina estruturas mais complexas enquanto garante a segurança de tipos. Aqui está um exemplo com um objeto personalizado:

**/*.content.ts

Copiar código

Copiar o código para a área de transferência

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 da Página",
        content: "Conteúdo da Página",
      },
    }),
  },
} satisfies Dictionary;

export default customContent;

Declaração de conteúdo

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