Installation in Vue 3

Install Handsontable’s Vue 3 wrapper via npm, import the stylesheets, and get your application up and running.

Vue 2 is not supported anymore, you can use Handsontable 16.2.0 with Vue 2.

Vue 3 version support

Handsontable supports the following Vue 3 versions:

Handsontable version	Vue 3 version
`11.0.0` and lower	No Vue 3 support
`11.1.0` and higher	`3.2.0` and higher

Handsontable supports Vue 3 versions 3.2.0 and higher, including all minor and patch versions within the Vue 3.x release line (e.g., 3.2.x, 3.3.x, 3.4.x, etc.).

Install with npm

This component needs the Handsontable library to work. Use npm to install the packages.

1
npm install handsontable @handsontable/vue3

Basic usage

1
<template>
2
  <hot-table
3
    :data="data"
4
    :rowHeaders="true"
5
    :colHeaders="true"
6
  >
7
  </hot-table>
8
</template>
9

10
<script>
11
  import { defineComponent } from 'vue';
12
  import { HotTable } from '@handsontable/vue3';
13
  import { registerAllModules } from 'handsontable/registry';
14

15
  // register Handsontable's modules
16
  registerAllModules();
17

18
  export default defineComponent({
19
    data() {
20
      return {
21
        data: [
22
          ['', 'Ford', 'Volvo', 'Toyota', 'Honda'],
23
          ['2016', 10, 11, 12, 13],
24
          ['2017', 20, 11, 14, 13],
25
          ['2018', 30, 15, 12, 13]
26
        ],
27
      };
28
    },
29
    components: {
30
      HotTable,
31
    }
32
  });
33
</script>