Skip to content
Handsontable dev

Formulas integration in Vue 3

In this tutorial, you will integrate the Formulas plugin (powered by HyperFormula) with Handsontable in a Vue 3 application.

Overview

You can use the Formulas plugin to perform Excel-like calculations in your business applications. It does it by an integration with our other product, HyperFormula, which is a powerful calculation engine with an extensive number of features.

Find out more about the Formulas plugin

Example - Using the Formulas plugin

When using HyperFormula with Vue 3, never let Vue make the HyperFormula instance reactive. Vue’s proxying interferes with the internal state of the engine and leads to subtle bugs and performance issues.

Wrap the instance with markRaw():

import { markRaw } from "vue";
import { HyperFormula } from "hyperformula";


const hfInstance = markRaw(HyperFormula.buildEmpty());

This keeps the engine untouched and ensures it behaves exactly as intended.

JavaScript
import { defineComponent, markRaw } from 'vue';
import { HotTable } from '@handsontable/vue3';
import { registerAllModules } from 'handsontable/registry';
import { HyperFormula } from 'hyperformula';


// register Handsontable's modules
registerAllModules();


// mark the HyperFormula instance as raw to avoid Vue from proxying it
const hfRaw = markRaw(
  HyperFormula.buildEmpty({
    licenseKey: 'internal-use-in-handsontable',
  })
);


const ExampleComponent = defineComponent({
  data() {
    return {
      hotSettings: {
        data: [
          ['4', '=IF(A1>4, "TRUE", "FALSE")', 'C1'],
          ['2', 'B2', '=A1+A2'],
          ['3', 'B3', 'C3'],
          ['4', 'B4', 'C4'],
          ['5', 'B5', 'C5'],
          ['6', 'B6', 'C6'],
        ],
        colHeaders: true,
        height: 'auto',
        autoWrapRow: true,
        autoWrapCol: true,
        licenseKey: 'non-commercial-and-evaluation',
        formulas: {
          engine: hfRaw,
        },
      },
    };
  },
  components: {
    HotTable,
  },
});


export default ExampleComponent;
HTML
<div id="example1">
  <hot-table :settings="hotSettings"></hot-table>
</div>

Related guides

Formula calculation

Configuration options

formulas

Core methods

getPlugin()

Hooks

afterFormulasValuesUpdate
afterNamedExpressionAdded
afterNamedExpressionRemoved
afterSheetAdded
afterSheetRemoved
afterSheetRenamed

Plugins

Formulas

What you learned

  • How to install and configure the Formulas plugin in a Vue 3 application.
  • How to wrap a HyperFormula instance with markRaw() to prevent Vue from making it reactive.
  • How to reference named expressions and cross-sheet formulas.

Next steps