Language Packs

Introduction

With EJS language packs, you can localize your module one locale at a time. At runtime, the appropriate language packs are resolved, loaded, cached, and applied for the active locale and active module.

Each language pack supports metadata in addition to the string resource definitions.

Creating a language pack

Each language pack file must be named with the corresponding locale code (e.g. en-US.js).

Language packs are loaded from a module's Asset/languages directory.

en-US.js

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

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, and is available in ES6.

Enabling a language pack

Before the application can load a module's language pack, it must know which locales are supported by the module. This is accomplished by updating the module's manifest.

Using ESCL in a language pack

The EJS String Composition Language is supported by default in all language packs.

Each language pack may only reference its own string resources at this time.

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

en-US.js

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

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.

Notice that you may pass literal values or property references in the v-i18n directive.

MyComponent.vue

<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>

Finally, the rendered result is:

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