Setting up a translation in Vue 3

Register a language file with Handsontable and pass the language option to the HotTable component to translate the grid UI.

Example

The following example shows a Handsontable instance with translations set up in Vue 3.

Find out which Vue 3 versions are supported

1
<script setup>
2
import { HotTable, HotColumn } from '@handsontable/vue3';
3
import numbro from 'numbro';
4
import jaJP from 'numbro/languages/ja-JP';
5
import trTR from 'numbro/languages/tr-TR';
6
import { registerAllModules } from 'handsontable/registry';
7

8
registerAllModules();
9

10
numbro.registerLanguage(jaJP);
11
numbro.registerLanguage(trTR);
12

13
const formatJP = {
14
  pattern: '0,0.00 $',
15
  culture: 'ja-JP',
16
};
17
const formatTR = {
18
  pattern: '0,0.00 $',
19
  culture: 'tr-TR',
20
};
21
const hotData = [
22
  {
23
    productName: 'Product A',
24
    JP_price: 1.32,
25
    TR_price: 100.56,
26
  },
27
  {
28
    productName: 'Product B',
29
    JP_price: 2.22,
30
    TR_price: 453.5,
31
  },
32
  {
33
    productName: 'Product C',
34
    JP_price: 3.1,
35
    TR_price: 678.1,
36
  },
37
];
38
const settings = {
39
  height: 'auto',
40
  autoWrapRow: true,
41
  autoWrapCol: true,
42
  licenseKey: 'non-commercial-and-evaluation'
43
};
44
</script>
45

46
<template>
47
  <div id="example1">
48
    <HotTable :data="hotData" :settings="settings">
49
      <HotColumn
50
        title="Product name"
51
        data="productName"
52
        width="120"
53
        read-only="true"
54
      />
55
      <HotColumn
56
        title="Price in Japan"
57
        type="numeric"
58
        :numeric-format="formatJP"
59
        data="JP_price"
60
        width="120"
61
      />
62
      <HotColumn
63
        title="Price in Turkey"
64
        data="TR_price"
65
        type="numeric"
66
        :numeric-format="formatTR"
67
        width="120"
68
      />
69
    </HotTable>
70
  </div>
71
</template>

Result

The HotTable component renders with number formatting and locale-specific text determined by the registered language file, and the context menu labels reflect the selected language.

Related guides

Language

Layout direction

Locale

Configuration options

Core methods

getTranslatedPhrase()

isLtr()