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

Install Skills for Claude Code

Skills for Claude Code give Claude AI deep knowledge of Handsontable’s APIs, so it can build, configure, and debug your grid accurately. We recommend installing them alongside Handsontable.

In Claude Code, run:

1
/plugin marketplace add handsontable/handsontable-skills
2
/plugin install handsontable-skills@handsontable-skills

For more details, see Skills for Claude Code.

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 lang="ts">
2
import { ref } from 'vue';
3
import { HotTable } from '@handsontable/vue3';
4
import { registerAllModules } from 'handsontable/registry';
5
import type { GridSettings } from 'handsontable/settings';
6

7
registerAllModules();
8

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

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