Installation

Install Handsontable through your preferred package manager, and control your grid through the HotTable component’s props.

Install Handsontable

To install Handsontable locally using a package manager, run one of these commands:

1
npm install handsontable @handsontable/vue3

1
yarn add handsontable @handsontable/vue3

1
pnpm add handsontable @handsontable/vue3

Register Handsontable’s modules

Import and register all of Handsontable’s modules with a single function call:

1
import { registerAllModules } from 'handsontable/registry';
2

3
registerAllModules();

Or, to reduce the size of your JavaScript bundle, import only the modules that you need.

Use the `HotTable` component

The main Handsontable component is called HotTable.

1
import { HotTable } from '@handsontable/vue3';

To set Handsontable’s configuration options, use HotTable’s props. For example:

1
<HotTable
2
  :data="data"
3
  :row-headers="true"
4
  :col-headers="true"
5
  height="auto"
6
  :auto-wrap-row="true"
7
  :auto-wrap-col="true"
8
  license-key="non-commercial-and-evaluation"
9
/>

Preview the result

1
<script setup>
2
import { ref } from 'vue';
3
import { HotTable } from '@handsontable/vue3';
4
import { registerAllModules } from 'handsontable/registry';
5

6
registerAllModules();
7

8
const hotSettings = ref({
9
  data: [
10
    ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
11
    ['2019', 10, 11, 12, 13],
12
    ['2020', 20, 11, 14, 13],
13
    ['2021', 30, 15, 12, 13],
14
    ['2022', 25, 20, 11, 14],
15
  ],
16
  rowHeaders: true,
17
  colHeaders: true,
18
  height: 'auto',
19
  autoWrapRow: true,
20
  autoWrapCol: true,
21
  licenseKey: 'non-commercial-and-evaluation',
22
});
23
</script>
24

25
<template>
26
  <div id="example1">
27
    <HotTable :settings="hotSettings" />
28
  </div>
29
</template>