Adaptador Svelte

Usa astro-intl/svelte para acceder a traducciones dentro de componentes Svelte con soporte de rich text via segmentos o strings HTML.

Importar

Importa desde el subpath astro-intl/svelte. Requiere svelte@^5 como peer dependency.

Import

import { getTranslations, createGetTranslations, renderRichText } from "astro-intl/svelte";
import RichText from "astro-intl/svelte/RichText.svelte";

Con Store (Astro Islands)

Usa getTranslations(namespace) dentro de componentes Svelte renderizados como Astro islands. Funciona de la misma manera que el adaptador de React. Antes de usar estos ejemplos, añade un objeto hero con title, subtitle y description a ambos JSON.

MyComponent.svelte

<script>
  import { getTranslations } from "astro-intl/svelte";

  const t = getTranslations("hero");
</script>

<h1>{t("title")}</h1>
<p>{t("subtitle")}</p>

Standalone (Sin Store)

Usa createGetTranslations(ui, defaultLocale) cuando necesites traducciones sin el store global.

standalone.svelte

<script>
  import { createGetTranslations } from "astro-intl/svelte";
  import en from "./i18n/messages/en.json";
  import es from "./i18n/messages/es.json";

  const getTranslations = createGetTranslations(
    { en, es },
    "en"
  );

  export let lang = "en";
  const t = getTranslations(lang, "hero");
</script>

<h1>{t("title")}</h1>

Rich Text con t.rich()

t.rich(key, tagNames?) retorna un array de RichSegment[] — cada segmento es texto plano o un chunk con tag. Puedes renderizarlos de dos formas.

Opción A: renderRichText() → string HTML

Usa renderRichText(segments, options) para convertir segmentos en un string HTML. El texto y los chunks se escapan, los tags nativos se limitan a elementos seguros y el HTML final se sanitiza. Pasa tags para elementos nativos o components para renderizado personalizado confiable.

RenderRichText.svelte

<script>
  import { getTranslations, renderRichText } from "astro-intl/svelte";

  const t = getTranslations("hero");
  const segments = t.rich("description");

  const html = renderRichText(segments, {
    tags: {
      bold: "strong",
      link: "a",
    },
  });
</script>

{@html html}

Opción B: Componente RichText.svelte

Importa el componente RichText para renderizado declarativo. Pasa tags para elementos HTML nativos y components para renderizado de componentes Svelte.

UsingRichText.svelte

<script>
  import { getTranslations } from "astro-intl/svelte";
  import RichText from "astro-intl/svelte/RichText.svelte";

  const t = getTranslations("hero");
  const segments = t.rich("description");
</script>

<RichText
  {segments}
  tags={{ bold: "strong", link: "a" }}
/>

Tip de HidrataciónUsa client:load o client:visible solo si necesitas interacción. El store del servidor no se transfiere al navegador: pasa textos traducidos como props o usa createGetTranslations con mensajes disponibles en el cliente.

RichText vs renderRichTextUsa RichText.svelte cuando necesites interpolación de componentes Svelte (ej., tooltip personalizado o componentes de iconos). Usa renderRichText() cuando tags HTML simples como <strong> o <a> sean suficientes — es más ligero y funciona con {@html}.

Svelte 5 RequeridoEl adaptador declara svelte@^5 como peer dependency. Usa Svelte 5 para los ejemplos de esta guía.