Language change in Vue 3

Change the default language of the context menu from English to any of the built-in translations, using the language property.

Example - Select language

The following example implements the @handsontable/vue3 component with the option to change the Context Menu language configured. Select a language from the selector above the table and open the Context Menu to see the result.

Find out which Vue 3 versions are supported

Select language of the context menu:

1
import { defineComponent } from 'vue';
2
import { HotTable } from '@handsontable/vue3';
3
import {
4
  registerLanguageDictionary,
5
  getLanguagesDictionaries,
6
  arAR,
7
  csCZ,
8
  deCH,
9
  deDE,
10
  esMX,
11
  frFR,
12
  hrHR,
13
  itIT,
14
  jaJP,
15
  koKR,
16
  lvLV,
17
  nbNO,
18
  nlNL,
19
  plPL,
20
  ptBR,
21
  ruRU,
22
  srSP,
23
  zhCN,
24
  zhTW
25
} from 'handsontable/i18n';
26
import { registerAllModules } from 'handsontable/registry';
27

28
registerLanguageDictionary(arAR);
29
registerLanguageDictionary(csCZ);
30
registerLanguageDictionary(deCH);
31
registerLanguageDictionary(deDE);
32
registerLanguageDictionary(esMX);
33
registerLanguageDictionary(frFR);
34
registerLanguageDictionary(hrHR);
35
registerLanguageDictionary(itIT);
36
registerLanguageDictionary(jaJP);
37
registerLanguageDictionary(koKR);
38
registerLanguageDictionary(lvLV);
39
registerLanguageDictionary(nbNO);
40
registerLanguageDictionary(nlNL);
41
registerLanguageDictionary(plPL);
42
registerLanguageDictionary(ptBR);
43
registerLanguageDictionary(ruRU);
44
registerLanguageDictionary(srSP);
45
registerLanguageDictionary(zhCN);
46
registerLanguageDictionary(zhTW);
47

48
// register Handsontable's modules
49
registerAllModules();
50

51
const ExampleComponent = defineComponent({
52
  data() {
53
    return {
54
      hotSettings: {
55
        data: [
56
          ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],
57
          ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'G2', 'H2', 'I2', 'J2'],
58
          ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],
59
          ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],
60
          ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],
61
        ],
62
        colHeaders: true,
63
        rowHeaders: true,
64
        contextMenu: true,
65
        height: 'auto',
66
        autoWrapRow: true,
67
        autoWrapCol: true,
68
        licenseKey: 'non-commercial-and-evaluation'
69
      },
70
      language: 'en-US',
71
      isOpen: false,
72
      languages: [],
73
    };
74
  },
75
  mounted() {
76
    this.languages = getLanguagesDictionaries().map((d) => d.languageCode);
77

78
    document.addEventListener('click', this.handleClickOutside);
79
    document.addEventListener('keydown', this.handleEscape);
80
  },
81
  beforeUnmount() {
82
    document.removeEventListener('click', this.handleClickOutside);
83
    document.removeEventListener('keydown', this.handleEscape);
84
  },
85
  methods: {
86
    toggleDropdown() {
87
      this.isOpen = !this.isOpen;
88
    },
89
    selectLanguage(lang) {
90
      this.language = lang;
91
      this.isOpen = false;
92
    },
93
    handleClickOutside(e) {
94
      if (this.$refs.dropdown && !this.$refs.dropdown.contains(e.target)) {
95
        this.isOpen = false;
96
      }
97
    },
98
    handleEscape(e) {
99
      if (e.key === 'Escape') {
100
        this.isOpen = false;
101
      }
102
    },
103
  },
104
  components: {
105
    HotTable,
106
  }
107
});
108

109
export default ExampleComponent;

1
<div id="example1" class="select-language">
2
  <div class="example-controls-container">
3
    <div class="controls">
4
      <label>Select language of the context menu:</label>
5
      <div class="theme-dropdown" ref="dropdown">
6
        <button
7
          class="theme-dropdown-trigger"
8
          type="button"
9
          aria-haspopup="listbox"
10
          :aria-expanded="isOpen"
11
          @click="toggleDropdown"
12
        >
13
          <span>{{ language }}</span>
14
          <svg class="theme-dropdown-chevron" aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6l6 -6"/></svg>
15
        </button>
16
        <ul class="theme-dropdown-menu" role="listbox" v-if="isOpen">
17
          <li
18
            v-for="lang in languages"
19
            :key="lang"
20
            role="option"
21
            :aria-selected="language === lang"
22
            @click="selectLanguage(lang)"
23
          >{{ lang }}</li>
24
        </ul>
25
      </div>
26
    </div>
27
  </div>
28
  <hot-table :language="language" :settings="hotSettings"></hot-table>
29
</div>

Related guides

Language

Layout direction

Locale

Configuration options

Core methods

getTranslatedPhrase()

Hooks

Language change in Vue 3

Example - Select language

Related articles