Skip to content
lingui-for

Astro: Trans

Trans in Astro is lowered back into native Astro wrapper syntax rather than staying in a JSX-only shape.

Supported inside <Trans>

Section titled “Supported inside <Trans>”
  • interpolated values in text content
  • regular HTML and component wrappers
  • nested wrappers and self-closing wrappers
  • class:list
  • transition:*
  • client:*
  • server:*
  • set:html
  • set:text

Astro interpolation expressions

Section titled “Astro interpolation expressions”

Trans can preserve Astro interpolation expressions that contain HTML elements, fragments, or HTML comments.

---
import { Trans } from "lingui-for-astro/macro";


const showDetails = true;
---


<Trans>{showDetails ? <span>Details</span> : <!-- details hidden -->}</Trans>
<Trans>{<><!-- details marker --><span>Details</span></>}</Trans>

These expressions are treated as one rich-text placeholder. At runtime, the placeholder renders the original Astro expression as Astro markup.

The outer Trans does not extract text from inside that preserved expression. If text inside a conditional branch should be translated, use t inside the branch:

---
import { Trans, t } from "lingui-for-astro/macro";


const showDetails = true;
---


<Trans>{showDetails ? <span>{t`Details`}</span> : <span aria-hidden="true" />}</Trans>

Nested Trans is not supported. The outer Trans treats the whole node-bearing expression as a single rich-text placeholder, so inner text that needs translation should use t inside the expression.

Still unsupported

Section titled “Still unsupported”

Some Astro constructs conflict with runtime rich-text rendering and are intentionally rejected.

  • <script>
  • <style>
  • is:raw

Notes on set:html and set:text

Section titled “Notes on set:html and set:text”

set:html and set:text are treated as explicit content holes.

  • set:html takes precedence if both set:html and set:text appear on the same wrapper.
  • If a wrapper uses one of these holes and also has explicit child content, the generated runtime code warns by default in development so that the override is visible while authoring. You can disable that behavior through framework.astro.runtimeWarnings in lingui.config.ts if you want to opt out.

For the framework-agnostic Trans model, see Trans.