Vue Localization - Using Globalize

NOTE

The Globalize package is outdated and potentially unsafe.

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

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

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'; /* eslint-disable import/no-unresolved */ /* eslint-disable import/no-webpack-loader-syntax */ // @ts-ignore import * as deMessages from 'npm:devextreme/localization/messages/de.json!json'; // @ts-ignore import * as ruMessages from 'npm:devextreme/localization/messages/ru.json!json'; // @ts-ignore import * as deCldrData from 'npm:devextreme-cldr-data/de.json!json'; // @ts-ignore import * as ruCldrData from 'npm:devextreme-cldr-data/ru.json!json'; // @ts-ignore import * as supplementalCldrData from 'npm:devextreme-cldr-data/supplemental.json!json'; import * as 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) => 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 scoped> .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>

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/25.1.3/css/dx.light.css" /> <script src="https://cdn.jsdelivr.net/npm/typescript@5.4.5/lib/typescript.js"></script> <script type="module"> import * as vueCompilerSFC from "https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@3.4.27/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </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.