> 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.3/guide/plugins/core-plugins/directives/v-i18n-directive.md).

# v-i18n Directive

## Introduction

The **v-i18n directive** plugin connects [component](/ejs/1.3/guide/modules/components.md) definitions to the EJS [Internationalization](/ejs/1.3/guide/internationalization.md) library.  

Adding the `v-i18n` attribute on an element within a component indicates that the element is localizable and contains a [string resource](/ejs/1.3/guide/internationalization/escl/concepts/string-resources.md) identifier.  This string resource identifier will be matched against the [language packs](/ejs/1.3/guide/internationalization/language-packs.md) for the [active module](/ejs/1.3/guide/modules.md) and [locale](/ejs/1.3/guide/internationalization/locales.md#active-locale), its value processed as [ESCL](/ejs/1.3/guide/internationalization/escl.md), 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](/ejs/1.3/guide/environments/namespaces.md) and adding the related entry to the [environment configuration](/ejs/1.3/guide/environments/configuration.md) file.

In this example, the [environment](/ejs/1.3/guide/environments.md) will expect to find the [plugin](/ejs/1.3/guide/plugins.md) class at `Plugin/Vue/Directive/i18nDirective.js`.

{% code title="environment.js" %}

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

{% endcode %}

## Using the v-i18n directive

### Simple string replacement

In this example, `my_string_id` references a [string resource](/ejs/1.3/guide/internationalization/escl/concepts/string-resources.md) in a [language pack](/ejs/1.3/guide/internationalization/language-packs.md).

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

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

{% endcode %}

```markup
<div v-i18n>my_string_id</div>
```

At runtime, the result will be rendered as:

```markup
<div>Hello, World!</div>
```

### Dynamic string replacement

In this example, `dynamic_string_id` references a [string resource](/ejs/1.3/guide/internationalization/escl/concepts/string-resources.md) in a [language pack](/ejs/1.3/guide/internationalization/language-packs.md) which includes [ESCL variables](/ejs/1.3/guide/internationalization/escl.md#variables).  The value of each variable can be passed to the v-i18n directive.

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

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

{% endcode %}

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

At runtime, the result will be rendered as:

```markup
<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.

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

This will be rendered as:

```markup
<div>Hello, World!</div>
```

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

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

This will be rendered as expected:

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

Alternatively, you may use the [$translate](/ejs/1.3/guide/plugins/core-plugins/instance-methods/usdtranslate.md) instance method.