Globalization

The globalization process combines the translation of component messages with adapting them to specific locales.

The following example demonstrates how to show the value as a culture-specific currency in the available Inputs components and how to localize their built-in messages.

<div id="vueapp" class="vue-app">
    <div class="example-wrapper row">
        <div class="col-xs-12 col-sm-6 example-col">
            <localization :language="'en'">
                <intl :locale="'en'">
                    <numerictextbox
                        :default-value="123.45"
                        :format="'c2'"
                    >
                    </numerictextbox>
                </intl>
            </localization>
        </div>
        <div class="col-xs-12 col-sm-6 example-col">
            <localization :language="'es'">
                <intl :locale="'es'">
                    <numerictextbox
                        :default-value="123.45"
                        :format="'c2'"
                    >
                    </numerictextbox>
                </intl>
            </localization>
        </div>
    </div>
</div>
import Vue from 'vue';
import { IntlProvider , load,
     loadMessages, LocalizationProvider } from '@progress/kendo-vue-intl';
import { NumericTextBox } from '@progress/kendo-vue-inputs';

import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
import currencyData from 'cldr-core/supplemental/currencyData.json';
import esNumbers from 'cldr-numbers-full/main/es/numbers.json';
import esCurrencies from 'cldr-numbers-full/main/es/currencies.json';

load(likelySubtags , currencyData, esNumbers, esCurrencies);

import esMessages from './app/es.json';
loadMessages(esMessages, 'es');

Vue.component('numerictextbox', NumericTextBox);
Vue.component('intl', IntlProvider);
Vue.component('localization', LocalizationProvider);

new Vue({
    el: '#vueapp'
});


{
    "numerictextbox": {
        "increment": "Incrementar valor",
        "decrement": "Disminuir valor"
    }
}

Internationalization

The internationalization process applies specific culture formats to a web application.

For more information, refer to:

Messages

The Inputs support the localization of their messages by utilizing the KendoVue Internationalization package.

The following table lists the built-in message keys and their default values.

Message Key Default Value
numerictextbox.increment Increase value
numerictextbox.decrement Decrease value

Right-to-Left Support

The following example demonstrates how to utilize the RTL support for the Inputs.

<div id="vueapp" class="vue-app">
    <div class="row example-wrapper" >
        <div class="col-12 col-md-6 example-col">
            <p>Input</p>
            <k-input :label="'First name'" dir="rtl"></k-input>
        </div>
        <div class="col-12 col-md-6 example-col">
            <p>NumericTextBox</p>
            <numerictextbox
                :default-value="123.45"
                :format="'c2'"
                dir="rtl"
            >
            </numerictextbox>
        </div>
    </div>
</div>
import { NumericTextBox, Input } from '@progress/kendo-vue-inputs';
Vue.component('k-input', Input);
Vue.component('numerictextbox', NumericTextBox);

new Vue({
    el: '#vueapp'
});

In this article