Globalization

<div id="vueapp" class="vue-app">
    <localization :language="spanish? 'es-ES' : 'en-EN'">
       <intl :locale="spanish ? 'es' : 'en'" >
                <div class="col-xs-12 col-md-12 example-config">
                   <button class="k-button"
                       @click="buttonClick" >
                       Change to {{ spanish ? 'English' : 'Spanish'}}
                       </button>
               </div>
           <grid
               :style="{height: '420px'}"
               :data-items="dataResult"
               :sortable="true"
               :groupable="true"
               :filterable="true"
               :pageable="{ pageSizes: [ 5, 7, 10 ] }"
               :skip="skip"
               :take="take"
               :columns = "columns"
               @datastatechange = "dataStateChange">
           </grid>
       </intl>
   </localization>
</div>

import Vue from 'vue';
import { Grid } from '@progress/kendo-vue-grid';
import { IntlProvider, load, LocalizationProvider, loadMessages }
 from '@progress/kendo-vue-intl';
import { process } from '@progress/kendo-data-query';

import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
import currencyData from 'cldr-core/supplemental/currencyData.json';
import weekData from 'cldr-core/supplemental/weekData.json';

import numbers from 'cldr-numbers-full/main/es/numbers.json';
import currencies from 'cldr-numbers-full/main/es/currencies.json';
import caGregorian from 'cldr-dates-full/main/es/ca-gregorian.json';
import dateFields from 'cldr-dates-full/main/es/dateFields.json';
import timeZoneNames from 'cldr-dates-full/main/es/timeZoneNames.json';

load(
    likelySubtags,
    currencyData,
    weekData,
    numbers,
    currencies,
    caGregorian,
    dateFields,
    timeZoneNames
);

const esMessages = {
    "datepicker": {
        "toggleCalendar": "Alternar calendario"
    },
    "calendar": {
        "today": "Hoy"
    },
    "dateinput": {
        "increment": "Incrementar valor",
        "decrement": "Disminuir valor"
    },
    "numerictextbox": {
        "increment": "Incrementar valor",
        "decrement": "Disminuir valor"
    },
    "grid": {
        "groupPanelEmpty": "Arrastre el título de una columna y suéltelo aquí para agrupar por ese criterio",
        "noRecords": "No hay datos disponibles.",
        "pagerFirstPage": "Ir a la primera página",
        "pagerPreviousPage": "Ir a la página anterior",
        "pagerNextPage": "Ir a la página siguiente",
        "pagerLastPage": "Ir a la última página",
        "pagerPage": "Página",
        "pagerOf": "de",
        "pagerItems": "ítems",
        "pagerInfo": "{0} - {1} de {2} ítems",
        "pagerItemsPerPage": "ítems por página",
        "filterEqOperator": "Es igual a",
        "filterNotEqOperator": "No es igual a",
        "filterIsNullOperator": "Es nulo",
        "filterIsNotNullOperator": "No es nulo",
        "filterIsEmptyOperator": "Está vacío",
        "filterIsNotEmptyOperator": "No está vacío",
        "filterStartsWithOperator": "Comienza con",
        "filterContainsOperator": "Contiene",
        "filterNotContainsOperator": "No contiene",
        "filterEndsWithOperator": "Termina en",
        "filterGteOperator": "Es mayor o igual que",
        "filterGtOperator": "Es mayor que",
        "filterLteOperator": "Es menor o igual que",
        "filterLtOperator": "Es menor o igual que",
        "filterIsTrue": "Sí",
        "filterIsFalse": "No",
        "filterBooleanAll": "(Todas)",
        "filterAfterOrEqualOperator": "Es posterior o igual a",
        "filterAfterOperator": "Es posterior",
        "filterBeforeOperator": "Es anterior",
        "filterBeforeOrEqualOperator": "Es anterior o igual a",
        "filterFilterButton": "Filtrar",
        "filterClearButton": "Limpiar filtros",
        "filterAndLogic": "Y",
        "filterOrLogic": "O"
    }
};
loadMessages(esMessages, 'es-ES');


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

new Vue({
    el: '#vueapp',
     data: function () {
        return {
            spanish: true,
            skip: 0,
            take: 7,
            dataResult: [],
            columns: [
                { field: 'ProductID', title: 'ID', width: '70px', filterable: false},
                { field: 'ProductName', title: 'Nombre del producto' },
                { field: 'FirstOrderedOn', title: 'Primero ordenado en', filter: 'date', format: '{0:D}' },
                { field: 'UnitPrice', title: 'Precio unitario', filter: 'numeric', format: '{0:c}' }
            ]
        };
    },
    methods: {
        buttonClick: function(){
            this.spanish = !this.spanish;
        },
        dataStateChange: function(event) {
            this.take = event.data.take;
            this.skip = event.data.skip;
        }
    }
});