JavaScript Data Grid Modules in Vue 2

Vue 2 Data GridModules in Vue 2

Reduce the size of your Vue 2 app by importing only the modules that you need and use.

On this page

Use modules in Vue

To use modules with Handsontable's Vue 2 wrapper, follow the steps below:

Step 1: Import base modules

No matter which optional modules you use, you need to import the base module.

In the entry point file of your application, import the handsontable/base module:

import Handsontable from 'handsontable/base';

Step 2: Import optional modules

Import optional modules of your choice, along with their registering functions.

For example, to import the numeric cell type module and the UndoRedo plugin module:

import {
  registerCellType, // cell types' registering function
  NumericCellType,
} from 'handsontable/cellTypes';

import {
  registerPlugin, // plugins' registering function
  UndoRedo,
} from 'handsontable/plugins';

Step 3: Register your modules

Register your modules, to let Handsontable recognize them.

For example, to register the numeric cell type module and the UndoRedo plugin module:

registerCellType(NumericCellType);
registerPlugin(UndoRedo);

Full example

import Vue from 'vue';
import App from './App.vue';

import Handsontable from 'handsontable/base';

import {
  registerCellType,
  NumericCellType,
} from 'handsontable/cellTypes';

import {
  registerPlugin,
  UndoRedo,
} from 'handsontable/plugins';

registerCellType(NumericCellType);
registerPlugin(UndoRedo);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');