Pivot Table for Vue 3 applications
Among the strengths of the framework developers note that Vue 3 is:
- more maintainable,
- and just a lot easier to develop with.
For those who prefer to switch versions of Vue, our team took care of making the process of migrating a project with our pivot table embedded to Vue 3 easy and fast. So we created a new wrapper, especially for the third version, to provide the smoothest integration possible. Let us tell you about all the enhancements we have.
Before, we had a particular module for integrating Flexmonster Pivot Table & Charts with Vue 2 on npm. Now we extended the same module so it would work with both versions of the framework. The only change you need to do to reach the Vue 3 module is to add vue3 to the module import path, so it looks like this:
You can simply install the updated module using Flexmonster CLI. If you don’t have it yet, you need to install the CLI first with the following command:
npm install -g flexmonster-cli
And then run this command from the folder containing package.json to install the Flexmonster Vue module:
flexmonster add vue-flexmonster
Or if you already have the previous version of the module installed, you can run this command to update it:
flexmonster update vue-flexmonster
Now declare and register the vue-flexmonster module or just register it if you have an ES6 app. For a detailed guide, check our Integration with Vue 3 tutorial.
To make embedding Flexmonster in your Vue 3 app as smooth as possible, we prepared several sample Vue 3 projects on GitHub. We also updated our Vue 2 samples. So now, with the
flexmonster create vue command, you can choose from 4 different options:
One of the essential features of Vue 3 is the new Composition API. With this in mind, we provided usage examples for both Options API and Composition API so you can compare the differences and choose the best approach for you.
VueFlexmonsterExamples folder, you can find cases that show how to access Flexmonster API calls and handle Flexmonster events, customize the Toolbar, and integrate with charting libraries. The explanation for all the examples can be found in our Flexmonster usage in Vue 3 guide.
We do our best to make it easy to add Flexmonster to any project you want and try to provide as much integration with popular frameworks as possible. We hope our Vue 3 integration has made your developer’s life a little bit easier and we would be delighted to hear some feedback from you on our work.
It can also be interesting for you to read more about: