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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.elentra.org/ejs/1.3/guide/plugins/core-plugins/directives/v-i18n-directive.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.