Pivot Table for Vue 3 applications
For the last few years, Vue.js has notably risen in popularity among modern JavaScript frameworks. Thousands of developers prefer to use Vue in their projects, choosing the best features of React and Angular that are combined in this web development tool. Inspired by the success of the framework, in October 2020, creators released Vue 3.
Among the strengths of the framework developers note that Vue 3 is:
- faster,
- smaller,
- 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. We have a wrapper for the third version, to provide the smoothest integration possible. Let us tell you about all the enhancements we have.
Flexmonster Pivot Vue 3 module
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: vue-flexmonster/vue3.
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. You can also watch the tutorial in the video format: Vue pivot table guide.
Vue 3 sample projects
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.
In the 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 easier, and we would be delighted to hear some feedback from you on our work.
Check our documentation and Help Center for any other questions.
It can also be interesting for you to read more about: