Setting up a translation in Vue 3

Configure your Vue 3 data grid with different number formats, depending on the specified language and culture.

Example

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

Find out which Vue 3 versions are supported

1
import { defineComponent } from 'vue';
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
// register Handsontable's modules
9
registerAllModules();
10

11
// register the languages you need
12
numbro.registerLanguage(jaJP);
13
numbro.registerLanguage(trTR);
14

15
const ExampleComponent = defineComponent({
16
  data() {
17
    return {
18
      formatJP: {
19
        pattern: '0,0.00 $',
20
        culture: 'ja-JP',
21
      },
22
      formatTR: {
23
        pattern: '0,0.00 $',
24
        culture: 'tr-TR',
25
      },
26
      hotData: [
27
        {
28
          productName: 'Product A',
29
          JP_price: 1.32,
30
          TR_price: 100.56,
31
        },
32
        {
33
          productName: 'Product B',
34
          JP_price: 2.22,
35
          TR_price: 453.5,
36
        },
37
        {
38
          productName: 'Product C',
39
          JP_price: 3.1,
40
          TR_price: 678.1,
41
        },
42
      ],
43
      settings: {
44
        height: 'auto',
45
        autoWrapRow: true,
46
        autoWrapCol: true,
47
        licenseKey: 'non-commercial-and-evaluation'
48
      }
49
    };
50
  },
51
  components: {
52
    HotTable,
53
    HotColumn,
54
  }
55
});
56

57
export default ExampleComponent;

1
<div id="example1">
2
  <hot-table :data="hotData" :settings="settings">
3
    <hot-column
4
      title="Product name"
5
      data="productName"
6
      width="120"
7
      read-only="true"
8
    ></hot-column>
9
    <hot-column
10
      title="Price in Japan"
11
      type="numeric"
12
      :numeric-format="formatJP"
13
      data="JP_price"
14
      width="120"
15
    ></hot-column>
16
    <hot-column
17
      title="Price in Turkey"
18
      data="TR_price"
19
      type="numeric"
20
      :numeric-format="formatTR"
21
      width="120"
22
    ></hot-column>
23
  </hot-table>
24
</div>