Globalization

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

Internationalization

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

For more information, refer to:

Messages

The Dialogs do not provide built-in translated messages.

Right-to-Left Support

The following example demonstrates how to utilize the RTL support for the Dialog and the Window.

<div id="vueapp" class="vue-app">
    <div dir="rtl" >
          <span v-if="!visibleDialog">
              <button class="k-button" @click="toggleDialog">Open Dialog</button>
          </span>
      <k-dialog v-if="visibleDialog" :title="'Please confirm'" @close="toggleDialog">
          <p :style="{ margin: '25px', textAlign: 'center' }">Are you sure you want to continue?</p>
          <dialog-actions-bar>
              <button class="k-button" @click='toggleDialog'>No</button>
              <button class="k-button" @click='toggleDialog'>Yes</button>
          </dialog-actions-bar>
      </k-dialog>
  </div>
</div>
import Vue from 'vue';
import { Dialog, DialogActionsBar } from '@progress/kendo-vue-dialogs';
Vue.component('k-dialog', Dialog);
Vue.component('dialog-actions-bar', DialogActionsBar);

new Vue({
    el: '#vueapp',
    data: function () {
        return {
            visibleDialog: false
        };
    },
    methods: {
      toggleDialog() {
          this.visibleDialog = !this.visibleDialog;
      }
    }
});

In this article