We’re happy to announce the release of version 3.0.0 of our Vue wrapper for Handsontable. Aside from some minor bug fixes and other enhancements, this new version includes a couple breaking changes that were made for the sake of compatibility and simplicity. We removed the on- prefixes from hook declaration names to make them more consistent with the main JavaScript configuration, and we changed the name of the root property to id.

We also see that TypeScript is being used more and more, so we’ve rewritten the wrapper in the language in order to reflect this movement. In doing so, we decided to include three additional builds (CommonJS, UMD, and ES) to make the migration more convenient. Check out the list below for more details.

Breaking changes

• The on- prefixes (as in onAfterChange) were removed from hook declaration names to simplify the Handsontable configuration when migrating from the vanilla version. After this change, the hooks should be declared exactly like in the plain JS Handsontable config:
  • Was: onAfterChange: function() { }
  • Is: afterChange: function() { }
    (#74)

• The root property was renamed to id. The way to set the id property of the main Handsontable DOM element also changed:
  • Was: root="custom-id-value"
  • Is: id="custom-id-value"
    (#74)
• The table property holding the reference to the Handsontable instance was renamed to hotInstance.

Changes

• Rewrote the wrapper in TypeScript, which automatically generates the TypeScript definition files (index.d.ts in the distributed packages). (#25, #74)
• Additional builds were added to the distributed packages. From 3.0.0 they include:
  • CommonJS (in the commonjs directory)
  • UMD (in the dist directory)
  • ES (in the es directory)
    (#74)
• Added sourcemaps to the UMD build. (#74)
• Fixed a problem with the data property watcher being triggered too many times. (#50, #20, #74, #78)
• Removed the cssstyle workaround. (#65)
• Added GitHub issue template. (#74)
• Added GitHub pull request template. (#74)
• Added missing fields to package.json. (#60, #61, #62)

Follow us on Twitter to keep up with news and updates.

Leave a comment below or write to us if you have any questions.