JavaScript Data Grid Installation in Vue 3

Vue 3 Data GridInstallation in Vue 3

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

On this page

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

Install with npm

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

npm install handsontable @handsontable/vue3

Basic usage

<template>
  <hot-table :data="data" :rowHeaders="true" :colHeaders="true"></hot-table>
</template>

<script>
  import { defineComponent } from 'vue';
  import { HotTable } from '@handsontable/vue3';
  import { registerAllModules } from 'handsontable/registry';
  import 'handsontable/styles/handsontable.min.css';
  import 'handsontable/styles/ht-theme-main.min.css';

  // register Handsontable's modules
  registerAllModules();

  export default defineComponent({
    data() {
      return {
        data: [
          ['', 'Ford', 'Volvo', 'Toyota', 'Honda'],
          ['2016', 10, 11, 12, 13],
          ['2017', 20, 11, 14, 13],
          ['2018', 30, 15, 12, 13]
        ],
      };
    },
    components: {
      HotTable,
    }
  });
</script>

TIP

You can reduce the size of your bundle by importing and registering only the modules that you need.