Globalization

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

For more information on how globalization practices are implemented in KendoVue. For more information on the globalization aspects which are available for each component.

The following example demonstrates how to localize the built-in messages of the Dropdowns.

<div id="vueapp" class="vue-app">
    <div class="row">
        <localization :language="'es-ES'">
            <div class="m-3">
                <p>DropDownList</p>
                <dropdownlist 
                    :label="'Product'" 
                    :data-items="dataProducts"
                >
                </dropdownlist>
            </div>
        </localization>
    </div>
</div>
import Vue from 'vue';
import { DropDownList } from '@progress/kendo-vue-dropdowns';
import { loadMessages, LocalizationProvider } from '@progress/kendo-vue-intl';
import esMessages from './app/es.json';

loadMessages(esMessages, 'es-ES');
Vue.component('dropdownlist', DropDownList);
Vue.component('localization', LocalizationProvider);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            dataProducts: []
        };
    }
});
{
    "dropdowns": {
        "nodata": "DATOS NO ENCONTRADOS.",
        "clear": "claro"
    }
}

Internationalization

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

For more information, refer to:

Messages

The Dropdowns 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
dropdowns.nodata NO DATA FOUND.
dropdowns.clear Clear

Right-to-Left Support

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

<div id="vueapp" class="vue-app">
    <div class="row">
        <div class="m-3">
            <p>DropDownList</p>
            <dropdownlist 
                :label="'Sports'" 
                :data-items="sports"
                dir="rtl"
            >
            </dropdownlist>
        </div>
    </div>
</div>
import Vue from 'vue';
import { DropDownList } from '@progress/kendo-vue-dropdowns';

Vue.component('dropdownlist', DropDownList);

new Vue({
    el: '#vueapp',

    data: function () {
        return {
            sports: [ 'Baseball', 'Basketball', 'Football', 'Tennis', 'Volleyball' ]
        };
    }
});

In this article