# Variables

## Introduction

A **variable** is a part of a string that will be replaced by values provided by the application.  Values may be passed using the [$translate](https://docs.elentra.org/ejs/1.3/guide/plugins/core-plugins/instance-methods/usdtranslate) instance method or the [v-i18n directive](https://docs.elentra.org/ejs/1.3/guide/plugins/core-plugins/directives/v-i18n-directive).

{% hint style="info" %}

#### Naming Convention

Variable names must be camel-cased, alphanumeric, and begin with a letter (e.g. `:myVariable`).  The colon character (`:`) indicates the beginning of a variable in the clause definition, but must not be included when passing the argument values.
{% endhint %}

## Working with variables

In this example, the application is expected to provide values for the `firstName` and `lastName` variables as arguments to the [$translate](https://docs.elentra.org/ejs/1.3/guide/plugins/core-plugins/instance-methods/usdtranslate) method or the [v-i18n directive](https://docs.elentra.org/ejs/1.3/guide/plugins/core-plugins/directives/v-i18n-directive).

```javascript
welcome_message: `Hello, { :firstName :lastName }, and welcome!`
```

```javascript
this.$translate('welcome_message', { firstName: 'John', lastName: 'Doe' });
// Hello, John Doe, and welcome!
```

```markup
<div v-i18n="{ firstName: 'John', lastName: 'Doe' }">welcome_message</div>
<!-- <div>Hello, John Doe, and welcome!</div> -->
```