Share Messages Across Files

Use plain JavaScript or TypeScript for shared descriptors

When a message needs to be reused across multiple renderers, define the descriptor in plain JavaScript or TypeScript with official Lingui core macros. See Plain JS/TS Setup for the build transform and extractor configuration required for plain TypeScript files.

src/lib/messages.ts

import { msg } from "@lingui/core/macro";

export const welcome = msg`Welcome back`;
export const settingsLabel = msg`Open settings`;

Then translate it from the renderer-specific file:

Svelte

<script lang="ts">
  import { t } from "lingui-for-svelte/macro";
  import { welcome } from "../lib/messages";
</script>

<p>{$t(welcome)}</p>

Astro

---
import { t } from "lingui-for-astro/macro";
import { welcome } from "../lib/messages";
---

<p>{t(welcome)}</p>

Why this works well

• The shared file follows official Lingui Core semantics.
• Framework-specific packages only handle framework syntax.
• The same descriptor can be consumed from Astro, Svelte, or any framework that can call i18n._().

For React islands, use the descriptor with @lingui/react the same way: useLingui() returns an i18n instance that accepts message descriptors via i18n._(). See the official Lingui docs for the React-specific API.