> For the complete documentation index, see [llms.txt](https://docs.elentra.org/ejs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.elentra.org/ejs/1.4/guide/internationalization/language-packs.md).

# Language Packs

## Introduction

With EJS **language packs**, you can localize your module one [locale](/ejs/1.4/guide/internationalization/locales.md) at a time. At runtime, the appropriate language packs are resolved, loaded, cached, and applied for the active locale and active [module](/ejs/1.4/guide/modules.md).

Each language pack supports metadata in addition to the [string resource](/ejs/1.4/guide/internationalization/escl/concepts/string-resources.md) definitions.

## Creating a language pack

Each language pack file must be named with the corresponding [locale code](/ejs/1.4/guide/internationalization/locales.md#locale-codes) (e.g. `en-US.js`).

Language packs are loaded from a [module](/ejs/1.4/guide/modules.md)'s `Asset/languages` directory.

{% code title="en-US.js" %}

```javascript
module.exports = {
    locale: 'en-US',
    resources: {
        welcome_message: `Hello, World!`,
        goodbye_message: `Goodbye, World!`
    }
};
```

{% endcode %}

{% hint style="info" %}
Notice the value of each string resource is wrapped in back ticks (\`).  This prevents conflicts with apostrophes (') and quotation marks ("), without requiring escape characters.

This is called a [**template literal**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals), and is available in ES6.
{% endhint %}

## Enabling a language pack

Before the application can load a [module](/ejs/1.4/guide/modules.md)'s language pack, it must know which [locales](/ejs/1.4/guide/internationalization/locales.md) are supported by the module.  This is accomplished by updating the module's [manifest](/ejs/1.4/guide/modules/configuration.md#the-module-manifest).

## Using ESCL in a language pack

The [EJS String Composition Language](/ejs/1.4/guide/internationalization/escl.md) is supported by default in all language packs.

{% hint style="warning" %}
Each language pack may only reference its own string resources at this time.
{% endhint %}

First, define the string resource in the language pack file.

{% code title="en-US.js" %}

```javascript
module.exports = {
    locale: 'en-US',
    resources: {
        app_name: `EJS`,
        welcome_message: `Hello, { :firstName :lastName }, and welcome to { app_name }!`,
    }
};
```

{% endcode %}

Next, inside a component definition, use the `v-i18n` directive and a reference to the string resource identifier (`welcome_message`), passing in a value to the `firstName` and `lastName` variables.

{% hint style="info" %}
Notice that you may pass literal values or property references in the `v-i18n` directive.
{% endhint %}

{% code title="MyComponent.vue" %}

```markup
<template>
    <div class="my-component">
        <p v-i18n="{ firstName: user.firstName, lastName: 'Doe' }">welcome_message</p>
    </div>
</template>

<script>
    module.exports = {
        name: 'my-component',
        data() {
            return {
                user: {
                    id: 1,
                    firstName: 'John'
                }
            };
        }
    };
</script>
```

{% endcode %}

Finally, the rendered result is:

```markup
<div class="my-component">
    <p>Hello, John Doe, and welcome to EJS!</p>
</div>
```