Handsontable in Vue.js standalone
The information is all in their documentation, albeit not beginner friendly.
https://github.com/handsontable/vue-handsontable-official
The code example is for compiled Vue (using import), but for CDN use, it states:
The component will be available as
Handsontable.vue.HotTable
so you can't reference the component with HotTable, but have to use the namespaced version: components: {HotTable: Handsontable.vue.HotTable}
Also, your data is not declared properly, and you aren't passing any data to the hot-table component.
TL;DR;
Here's what it should look like:
new Vue({ el: '#app', components: { HotTable: Handsontable.vue.HotTable }, data: function() { return{ tableData: [ ['', 'Tesla', 'Mercedes', 'Toyota', 'Volvo'], ['2019', 10, 11, 12, 13], ['2020', 20, 11, 14, 13], ['2021', 30, 15, 12, 13] ] } },});<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script><link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@handsontable/vue/dist/vue-handsontable.min.js"></script> <div class="container" id="app"> <div> <hot-table :data="tableData" licenseKey="non-commercial-and-evaluation"/> </div></div>
A free open source alternative:https://codesandbox.io/embed/vue-default-template-p4hwn
<html><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script><script src="https://bossanova.uk/jexcel/v3/jexcel.js"></script><script src="https://bossanova.uk/jsuites/v2/jsuites.js"></script><link rel="stylesheet" href="https://bossanova.uk/jexcel/v3/jexcel.css" type="text/css" /><link rel="stylesheet" href="https://bossanova.uk/jsuites/v2/jsuites.css" type="text/css" /><div id="spreadsheet"></div><input type="button" value="Add new row" onclick="vm.insertRow()" /><script>var options = { data:[[]], minDimensions:[10,10],}var vm = new Vue({ el: '#spreadsheet', mounted: function() { let spreadsheet = jexcel(this.$el, options); Object.assign(this, spreadsheet); }}); </script></html>