v-i18n Directive

Introduction

The v-i18n directive plugin connects component definitions to the EJS Internationalization library.

Adding the v-i18n attribute on an element within a component indicates that the element is localizable and contains a string resource identifier. This string resource identifier will be matched against the language packs for the active module and locale, its value processed as ESCL, and the result inserted back into the element. The process is repeated whenever the component is updated.

Enabling the v-i18n directive

The v-i18n directive can be enabled across an application by including it in the Plugin namespace and adding the related entry to the environment configuration file.

In this example, the environment will expect to find the plugin class at Plugin/Vue/Directive/i18nDirective.js.

environment.js

...
plugins: [
    'Vue/Directive/i18nDirective'
]
...

Using the v-i18n directive

Simple string replacement

In this example, my_string_id references a string resource in a language pack.

en-US.js

...
locale: 'en-US',
resources: {
    my_string_id: `Hello, World!`
}
...

<div v-i18n>my_string_id</div>

At runtime, the result will be rendered as:

<div>Hello, World!</div>

Dynamic string replacement

In this example, dynamic_string_id references a string resource in a language pack which includes ESCL variables. The value of each variable can be passed to the v-i18n directive.

en-US.js

...
locale: 'en-US',
resources: {
    dynamic_string_id: `Hello, { :firstName }!`
}
...

<div v-i18n="{ firstName: 'John' }">dynamic_string_id</div>

At runtime, the result will be rendered as:

<div>Hello, John!</div>

Known Issues

Elements which mix text nodes and DOM elements

Elements which contain both a text node and a DOM element will have the DOM nodes overwritten.

<div v-i18n>my_string_id<strong>FOO</strong></div>

This will be rendered as:

<div>Hello, World!</div>

Instead, wrap the text node which needs to be translated directly:

<div><span v-i18n>my_string_id</span><strong>FOO</strong></div>

This will be rendered as expected:

<div><span>Hello, World!</span><strong>FOO</strong></div>

Alternatively, you may use the $translate instance method.