React Data Grid Modules in Vue 3

Vue 3 Data GridModules in Vue 3

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

On this page

Find out which Vue 3 versions are supported

Use modules with Vue 3

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

Step 1: Import the base module

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 { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import Handsontable from 'handsontable/base'; import { registerCellType, NumericCellType, } from 'handsontable/cellTypes'; import { registerPlugin, UndoRedo, } from 'handsontable/plugins'; registerCellType(NumericCellType); registerPlugin(UndoRedo); createApp(App).use(router).mount('#app');