DevExtreme Vue - Localization

Localization adapts your application to linguistic and regional differences. DevExtreme allows you to localize:

DevExtreme also supports right-to-left layout.

NOTE
Refer to the Intl and Using Globalize articles if you are localizing DevExtreme ASP.NET MVC Controls.

Dictionaries

Dictionaries contain localized strings for different languages. The strings are key/value pairs and are shipped as JavaScript or JSON files (depending on the package you use).

All dictionaries are contributed and curated by the community. The list of dictionaries is available on GitHub.

You can find all the dictionaries on your local machine in the DevExtreme installation folder's or ZIP archive's Lib\js\localization directory. These dictionaries are also available on npm.

Include the dictionaries using the import or require statement the statement depends on the syntax for working with modules. The following code shows ECMAScript 6 and CommonJS syntaxes:

ECMAScript 6 syntax
CommonJS syntax
  • // ...
  • // Dictionaries for German language
  • import deMessages from "devextreme/localization/messages/de.json";
  • import { locale, loadMessages } from "devextreme/localization";
  •  
  • export default {
  • created() {
  • loadMessages(deMessages);
  • locale(navigator.language);
  • }
  • }
  • // ...
  • // Dictionaries for German language
  • const deMessages = require('devextreme/localization/messages/de.json');
  • const localization = require('devextreme/localization');
  •  
  • localization.loadMessages(deMessages);
  • localization.locale(navigator.language);

Create a New Dictionary

To make a dictionary for a new locale:

  1. Copy one of the available dictionaries.
  2. Rename it according to the new locale.
  3. Translate the strings in it and change the locale key.

You can submit JSON dictionaries to our repository on GitHub. You should refer to our Contribution Guide before submitting content.

Add Strings to a Dictionary

In the following example, the loadMessages(messages) method adds a string with the greetingMessage key to the English and German dictionaries. The formatMessage(key, value) method then uses this key to retrieve the string from the dictionary that corresponds to the locale set by the locale(locale) method.

App.vue
  • <template>
  • <h1>{{ greeting }}</h1>
  • </template>
  •  
  • <script>
  • import { formatMessage, loadMessages, locale } from 'devextreme/localization';
  •  
  • export default {
  • created() {
  • loadMessages({
  • 'en': {
  • 'greetingMessage': 'Good morning, {0}!'
  • },
  • 'de': {
  • 'greetingMessage': 'Guten morgen, {0}!'
  • }
  • });
  • locale('de');
  • },
  • data() {
  • return {
  • userName: 'John'
  • }
  • },
  • computed: {
  • greeting() {
  • return formatMessage('greetingMessage', this.userName);
  • }
  • }
  • }
  • </script>

You can also see this approach in one of our demos:

Using Intl Demo Using Globalize Demo

Override Strings in a Dictionary

To override a string, find its key in any dictionary and use it to specify the new string value.

In the following code, we override two strings from the English dictionary:

App.vue
  • <template>
  • <!-- ... -->
  • </template>
  •  
  • <script>
  • import { loadMessages } from 'devextreme/localization';
  •  
  • export default {
  • created() {
  • loadMessages({
  • "en": {
  • "dxDataGrid-editingDeleteRow": "Remove",
  • "dxDataGrid-editingUndeleteRow": "Recover"
  • }
  • });
  • }
  • }
  • </script>
See Also

Localize Dates, Numbers, and Currencies

DevExtreme enables you to localize date, number and currency values using Intl or Globalize. We recommend using Intl because it is supported out of the box. You can use Globalize instead if the target browser do not support Intl natively or via a polyfill, or if your app is already using Globalize.

Using Intl

Intl is the short name used to refer to a particular ECMAScript Internationalization API object. DevExtreme supports this API out of the box. All you need to do is set the locale:

App.vue
  • <template>
  • <!-- ... -->
  • </template>
  •  
  • <script>
  • // Dictionaries for German language
  • import deMessages from "devextreme/localization/messages/de.json";
  •  
  • import { locale, loadMessages } from "devextreme/localization";
  •  
  • export default {
  • created() {
  • loadMessages(deMessages);
  • locale(navigator.language);
  • }
  • }
  • </script>

View Demo

If you want to format and localize strings, numbers, dates, and currencies automatically according to the specified locale, define the format.type property. You can also specify a currency other than USD globally. For this purpose, use the defaultCurrency or currency settings:

App.vue
  • <template>
  • <DxDataGrid ... >
  • <DxColumn data-field="price">
  • <!-- Specifying a currency in a format definition -->
  • <DxFormat
  • type="currency"
  • currency="RUB"
  • />
  • </DxColumn>
  • </DxDataGrid>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import config from 'devextreme/core/config';
  •  
  • import DxDataGrid, {
  • DxColumn,
  • DxFormat
  • } from 'devextreme-vue/data-grid';
  •  
  • export default {
  • components: {
  • DxDataGrid,
  • DxColumn,
  • DxFormat
  • },
  • created() {
  • // Specifying a currency globally
  • config({ defaultCurrency: 'EUR' });
  • }
  • }
  • </script>

You can use structures compatible with the Intl API for value formatting. Refer to the Intl Formats section in the Value Formatting article for more information.

Using Globalize

IMPORTANT
React projects created with the Create React App do not support Globalize. DevExtreme React Template is one of such projects. Use Intl in these projects instead.

Activating Globalize in your project requires the following files:

  • Globalize library
  • CLDR library
  • CLDR data

All the components are available via CDN and npm.

  • CDN or local files

    Include the Globalize and CLDR libraries using <script> tags as shown below. In this example, German dictionary is included. Note that the order you include the libraries is important. Then, set the locale using the Globalize.locale() method:

    View Demo

  • npm

    Install the devextreme-cldr-data and globalize packages:

    • npm install --save-dev devextreme-cldr-data globalize

    Register Globalize in your project as described in the following help topic: Globalize Registration.

    Then, include Globalize, CLDR, and language-specific CLDR data using the import or require statement—the statement depends on the syntax for working with modules. The code below shows ECMAScript 6 and CommonJS syntaxes. These examples include German dictionary.

    View Demo

You can format and localize strings, numbers, dates, and currencies automatically according to a locale. For this, apply the format.type property. You can also use a currency other than USD (see the last example in the Using Intl topic).

In addition, you can now format values using structures accepted by numberFormatter, currencyFormatter, and dateFormatter, for example:

App.vue
  • <template>
  • <DxDataGrid ... >
  • <DxColumn
  • data-field="OrderDate"
  • :format="{ skeleton: 'yMMMd' }"
  • />
  • <DxColumn
  • data-field="SaleAmount"
  • :format="{ currency: 'EUR', maximumFractionDigits: 2 }"
  • />
  • </DxDataGrid>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  • // ...
  • // import dictionaries and localization modules here
  •  
  • import DxDataGrid, {
  • DxColumn
  • } from 'devextreme-vue/data-grid';
  •  
  • export default {
  • components: {
  • DxDataGrid,
  • DxColumn
  • },
  • // ...
  • }
  • </script>
See Also

Localize Custom Values

DevExtreme provides an API for localizing messages, dates, and numbers in your app.

To localize a message, add it to a dictionary as shown in the Add Strings to a Dictionary article.

To localize a custom date or number, apply a format to it as shown in the Format Custom Values article.

Right-to-Left Support

Right-to-left (RTL) support allows the UI component to adapt its content to right-to-left locales.

RTL layout can be specified for an individual UI component using its rtlEnabled property:

App.vue
  • <template>
  • <DxSlider ...
  • :rtl-enabled="true"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxSlider from 'devextreme-vue/slider';
  •  
  • export default {
  • components: {
  • DxSlider
  • }
  • }
  • </script>

To apply RTL to your entire application, set the same property globally using the config() function:

App.vue
  • <template>
  • <!-- ... -->
  • </template>
  •  
  • <script>
  • import config from 'devextreme/core/config';
  • export default {
  • // ...
  • created() {
  • config({ rtlEnabled: true });
  • }
  • }
  • </script>
See Also