# Language Packs

## Introduction

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

Each language pack supports metadata in addition to the [string resource](https://docs.elentra.org/ejs/1.1/guide/escl/string-resources) definitions.

## Creating a language pack

Each language pack file must be named with the corresponding [locale code](https://docs.elentra.org/ejs/1.1/guide/locales#locale-codes) (e.g. `en-US.js`).

Language packs are loaded from a [module](https://docs.elentra.org/ejs/1.1/guide/modules)'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 %}

## Enabling a language pack

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

## Using ESCL in a language pack

The [EJS String Composition Language](https://docs.elentra.org/ejs/1.1/guide/escl) 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>
```