DevExtreme v26.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Vue Localization - Using Globalize

The Globalize package is outdated and potentially unsafe.

Use Globalize at your own risk. We recommend switching to Intl for a more secure solution.

Backend API
<template> <div> <DxDataGrid :data-source="payments" key-expr="PaymentId" > <DxEditing :allow-updating="true" :popup="editPopupOptions" mode="popup" /> <DxFilterRow :visible="true" apply-filter="auto" /> <DxColumn :caption="formatMessage('Number')" :allow-editing="false" :width="100" data-field="PaymentId" /> <DxColumn :caption="formatMessage('Contact')" data-field="ContactName" /> <DxColumn :caption="formatMessage('Company')" data-field="CompanyName" /> <DxColumn :caption="formatMessage('Amount')" :editor-options="amountEditorOptions" data-field="Amount" data-type="number" format="currency" /> <DxColumn :caption="formatMessage('PaymentDate')" data-field="PaymentDate" data-type="date" /> </DxDataGrid> <div class="options"> <div class="caption">Options</div> <div class="option"> <label for="selectInput">Language </label> <DxSelectBox :data-source="locales" :value="locale" :input-attr="selectBoxInputAttr" value-expr="Value" display-expr="Name" @valueChanged="changeLocale($event)" /> </div> </div> </div> </template> <script setup lang="ts"> import { onBeforeMount, ref } from 'vue'; import { DxDataGrid, DxColumn, DxEditing, DxFilterRow, } from 'devextreme-vue/data-grid'; import DxSelectBox, { type DxSelectBoxTypes } from 'devextreme-vue/select-box'; import 'devextreme/common/core/localization/globalize/number'; import 'devextreme/common/core/localization/globalize/date'; import 'devextreme/common/core/localization/globalize/currency'; import 'devextreme/common/core/localization/globalize/message'; import deMessages from 'devextreme/localization/messages/de.json'; import ruMessages from 'devextreme/localization/messages/ru.json'; import deCldrData from 'devextreme-cldr-data/de.json'; import ruCldrData from 'devextreme-cldr-data/ru.json'; import supplementalCldrData from 'devextreme-cldr-data/supplemental.json'; import Globalize from 'globalize'; import service from './data.ts'; type Locale = string; const locales: { Name: string, Value: Locale }[] = service.getLocales(); const payments: Record<string, string | number>[] = service.getPayments(); const locale: Locale = getLocale(); const editPopupOptions = { width: 700, height: 345 }; const amountEditorOptions = { format: 'currency', showClearButton: true }; const selectBoxInputAttr = { id: 'selectInput' }; const formatMessage = ref((msg: string) => msg); onBeforeMount(() => { initGlobalize(); }); function getLocale(): Locale { const savedLocale = sessionStorage.getItem('locale'); return savedLocale != null ? savedLocale : 'en'; } function setLocale(newLocale: Locale) { sessionStorage.setItem('locale', newLocale); } function initGlobalize() { Globalize.load( deCldrData, ruCldrData, supplementalCldrData, ); Globalize.loadMessages(deMessages); Globalize.loadMessages(ruMessages); Globalize.loadMessages(service.getDictionary()); Globalize.locale(locale); formatMessage.value = Globalize.formatMessage.bind(Globalize); } function changeLocale({ value }: DxSelectBoxTypes.ValueChangedEvent) { setLocale(value); document.location.reload(); } </script> <style> .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .option { margin-top: 10px; } .caption { font-size: 18px; font-weight: 500; } .option > label { margin-right: 10px; } .option > .dx-selectbox { display: inline-block; vertical-align: middle; } </style>
const payments = [ { PaymentId: 1, ContactName: 'Nancy Davolio', CompanyName: 'Premier Buy', Amount: 1740, PaymentDate: '2013/01/06', }, { PaymentId: 2, ContactName: 'Andrew Fuller', CompanyName: 'ElectrixMax', Amount: 850, PaymentDate: '2013/01/13', }, { PaymentId: 3, ContactName: 'Janet Leverling', CompanyName: 'Video Emporium', Amount: 2235, PaymentDate: '2013/01/07', }, { PaymentId: 4, ContactName: 'Margaret Peacock', CompanyName: 'Screen Shop', Amount: 1965, PaymentDate: '2013/01/03', }, { PaymentId: 5, ContactName: 'Steven Buchanan', CompanyName: 'Braeburn', Amount: 880, PaymentDate: '2013/01/10', }, { PaymentId: 6, ContactName: 'Michael Suyama', CompanyName: 'PriceCo', Amount: 5260, PaymentDate: '2013/01/17', }, { PaymentId: 7, ContactName: 'Robert King', CompanyName: 'Ultimate Gadget', Amount: 2790, PaymentDate: '2013/01/21', }, { PaymentId: 8, ContactName: 'Laura Callahan', CompanyName: 'EZ Stop', Amount: 3140, PaymentDate: '2013/01/01', }, { PaymentId: 9, ContactName: 'Anne Dodsworth', CompanyName: 'Clicker', Amount: 6175, PaymentDate: '2013/01/24', }, { PaymentId: 10, ContactName: 'Clark Morgan', CompanyName: 'Store of America', Amount: 4575, PaymentDate: '2013/01/11', }, ]; const locales = [ { Name: 'English', Value: 'en', }, { Name: 'Deutsch', Value: 'de', }, { Name: 'Русский', Value: 'ru', }, ]; const dictionary = { en: { Number: 'Number', Contact: 'Contact', Company: 'Company', Amount: 'Amount', PaymentDate: 'Payment Date', }, de: { Number: 'Nummer', Contact: 'Ansprechpartner', Company: 'Firma', Amount: 'Betrag', PaymentDate: 'Zahlungsdatum', }, ru: { Number: 'Номер', Contact: 'Имя', Company: 'Организация', Amount: 'Сумма', PaymentDate: 'Дата оплаты', }, }; export default { getPayments() { return payments; }, getLocales() { return locales; }, getDictionary() { return dictionary; }, };
declare module 'globalize';
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

To localize components with Globalize, link modules, CLDR scripts, and DevExtreme dictionaries for the target locales. Load the CLDR data for these locales. If following a modular approach, import the necessary components. Set the current locale with the Globalize.locale method.