Integration with Vue

Installing HyperFormula in a Vue application works the same as with vanilla JavaScript.

For more details, see the client-side installation section.

Troubleshooting

Vue reactivity issues

If you encounter an error like

Uncaught TypeError: Cannot read properties of undefined (reading 'licenseKeyValidityState')

it means that Vue's reactivity system tries to deeply observe the HyperFormula instance. To fix this, wrap your HyperFormula instance in Vue's markRaw (opens new window) function:

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

const hfInstance = markRaw(
  HyperFormula.buildEmpty({
    licenseKey: 'internal-use-in-handsontable',
  })
);

This function prevents Vue from converting the HyperFormula instance into a reactive proxy, which can cause errors and performance issues.

Demo

TIP

This demo uses the Vue 3 (opens new window) framework. If you are looking for an example using Vue 2, check out the code on GitHub (opens new window).