msg and defineMessage

msg and defineMessage define message descriptors without translating them immediately. msg is an alias for defineMessage; they are functionally identical.

They are the right tools when the message needs to be stored, exported, reused across files, or translated later by a different renderer or runtime boundary.

For the framework-agnostic Lingui semantics, see the official msg and defineMessage reference.

Source

Demo.svelte Catalog

<script lang="ts">
  import { defineMessage, msg, t } from "lingui-for-svelte/macro";

  const submitLabel = defineMessage({
    id: "form.submit",
    message: "Submit",
  });
  let welcome = $derived(msg`Welcome back, ${name}`);
</script>

<p class="mb-2">
  {$t(welcome)}
</p>

<button type="button" class="rounded bg-blue-500 px-4 py-2 text-white">
  {$t(submitLabel)}
</button>

#. js-lingui-explicit-id
#: src/demos/macros/msg-and-define-message/Demo.svelte
msgid "form.submit"
msgstr "Submit"

#: src/demos/macros/msg-and-define-message/Demo.svelte
msgid "Welcome back, {name}"
msgstr "Welcome back, {name}"

Result

Preview Transformed Svelte Compiled Catalog

Welcome back, Lingui

Submit

<script lang="ts">
  import { createLinguiAccessors as createLinguiAccessors } from "lingui-for-svelte/runtime";
  const __l4s_ctx = createLinguiAccessors();
  const __l4s_getI18n = __l4s_ctx.getI18n;
  const __l4s_translate = __l4s_ctx._;

  const submitLabel = /*i18n*/
  {
    id: "form.submit"
  };
  let welcome = $derived(/*i18n*/
  {
    id: "CaB/+I",
    values: {
      name: name
    }
  });

  __l4s_ctx.prime();
</script>

<p class="mb-2">
  {$__l4s_translate(welcome)}
</p>

<button type="button" class="rounded bg-blue-500 px-4 py-2 text-white">
  {$__l4s_translate(submitLabel)}
</button>

/*eslint-disable*/
import type { Messages } from "@lingui/core";
export const messages = JSON.parse(
  "{\"form.submit\":[\"Submit\"],\"CaB/+I\":[\"Welcome back, \",[\"name\"]]}",
) as Messages;

Locale

EN JA

Name

Usage

Svelte

<script lang="ts">
  import { defineMessage, msg, t } from "lingui-for-svelte/macro";

  const welcome = msg`Welcome back`;

  const submitLabel = defineMessage({
    id: "form.submit",
    message: "Submit",
  });
</script>

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

Astro

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

const welcome = msg`Welcome back`;

const submitLabel = defineMessage({
  id: "form.submit",
  message: "Submit",
});
---

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

Official Lingui

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

const welcome = msg`Welcome back`;

const submitLabel = defineMessage({
  id: "form.submit",
  message: "Submit",
});

const label = t(welcome);

Tip

Descriptors can also be defined and exported from a separate file. To use them in plain JavaScript or TypeScript:

• Import macros from @lingui/core/macro.
• Transform with unplugin-lingui-macro.

See Plain JS/TS Setup for the full setup and the recommended authoring pattern.

When they are a good fit

• the translation should happen later, not at definition time
• the same descriptor will be reused across files or renderers
• you want plain TypeScript or JavaScript to stay close to official Lingui Core patterns

Recommended rule

For plain .js and .ts files, prefer the official @lingui/core/macro package. Framework-specific packages are for framework syntax, not for generic descriptor authoring.