Skip to content
Handsontable dev

Modules in Vue 3

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

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:

  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';

  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';

  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');
Modules
Bundle size