# JavaScript Apps Internationalization

This tutorial will walk you through using Lingui's internationalization (i18n) features in a vanilla JavaScript application. We'll cover the essentials of the `@lingui/core` package, which handles all translation and message catalog management.

Example

If you're looking for a working solution, check out the [Vanilla JS example](https://github.com/lingui/js-lingui/tree/main/examples/js). This example application shows a complete setup using Lingui and vanilla JavaScript.

## Installing Lingui[​](#installing-lingui "Direct link to Installing Lingui")

1. Follow the [Installation and Setup](https://lingui.dev/installation.md) page for initial setup.
2. Install the [`@lingui/core`](https://lingui.dev/ref/core.md) package, which is responsible for translation and message catalog handling.

## Setting up i18n[​](#setting-up-i18n "Direct link to Setting up i18n")

First, we need to set up the i18n singleton, which is pretty simple:

```
import { i18n } from "@lingui/core";

import { messages } from "path-to-locale/en/messages.js";



i18n.load("en", messages);

i18n.activate("en");
```

The `messages.js` is generated by the Lingui CLI and contains compiled message catalogs.

tip

Alternatively, you can load catalogs dynamically using the [`@lingui/loader`](https://lingui.dev/ref/loader.md) or [`@lingui/vite-plugin`](https://lingui.dev/ref/vite-plugin.md) without the need to import compiled messages manually.

## Localizing Your App[​](#localizing-your-app "Direct link to Localizing Your App")

To localize your application, you need to wrap your localizable texts in [Macros](https://lingui.dev/ref/macro.md). Lingui provides a set of Core Macros that transform tagged template literals and can be used in any JavaScript context.

Let's wrap our text in the [`t`](https://lingui.dev/ref/macro.md#t) macro:

```
import { t } from "@lingui/core/macro";



t`Hello World!`;

// becomes "Salut le monde!"



const name = "Fred";

t`My name is ${name}`;

// becomes "Je m'appelle Fred"
```

Plurals and selections are possible using [`plural`](https://lingui.dev/ref/macro.md#plural) and [`select`](https://lingui.dev/ref/macro.md#select) macros:

```
import { plural } from "@lingui/core/macro";



const count = 42;



plural(count, {

  one: "# book",

  other: "# books",

});

// becomes "42 livres"
```

It's also possible to nest message formats. Each message format method in `i18n` has a standalone companion, which only returns message without performing the translation:

```
import { t, select, plural } from "@lingui/core/macro";



select(gender, {

  offset: 1,

  female: plural(numOfGuests, {

    offset: 1,

    0: t`${host} does not give a party.`,

    1: t`${host} invites ${guest} to her party.`,

    2: t`${host} invites ${guest} and one other person to her party.`,

    other: t`${host} invites ${guest} and # other people to her party.`

  }),

  male: plural(value, {...}),

  other: plural(value, {...}),

});
```

caution

All Core Macros cannot be used at the module level. They must be used within a component or function. See the [Macros](https://lingui.dev/ref/macro.md#using-macros) documentation for more information.

## See Also[​](#see-also "Direct link to See Also")

* [Message Extraction Guide](https://lingui.dev/guides/message-extraction.md)
* [Pluralization Guide](https://lingui.dev/guides/plurals.md)
* [Dynamic Loading of Message Catalogs](https://lingui.dev/guides/dynamic-loading-catalogs.md)
* [Lingui CLI Reference](https://lingui.dev/ref/cli.md)