Autore:
    Aymeric PINEAU
    Creazione:2024-08-11Ultimo aggiornamento:2025-06-29

    Traduzione

    Definizione delle Traduzioni

    La funzione t in intlayer ti permette di dichiarare contenuti in più lingue. Questa funzione garantisce la sicurezza dei tipi, generando un errore se mancano delle traduzioni, il che è particolarmente utile negli ambienti TypeScript.

    Ecco un esempio di come dichiarare contenuti con traduzioni.

    **/*.content.ts
    import { t, type Dictionary } from "intlayer";

interface Content {
  welcomeMessage: string;
}

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

    Configurazione delle Locali

    Per garantire una corretta gestione delle traduzioni, puoi configurare le località accettate in intlayer.config.ts. Questa configurazione ti permette di definire le lingue supportate dalla tua applicazione:

    intlayer.config.ts
    import { Locales, type IntlayerConfig } from "intlayer";

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

export default config;

    Utilizzo delle Traduzioni nei Componenti React

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

    **/*.tsx
    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
    "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
    <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
    <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
    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
    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
    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
    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
);
    Dichiarazione dei contenutiPlurale