Visualize your data using composition and option API
My Twitter has been taken over by posts about the new version of the Vue.js framework, so I couldn’t resist creating some data visualization stuff with it.
Firstly I decided to search for some extra information about the new Vue release to have a clue what I’m dealing with. Summing everything up, I made the following conclusions:
- Vue creators managed to improve performance and bundle size and make Vue 3 even faster and lighter than Vue 2;
- The new release came with some syntax changes and a couple of deprecations;
- Vue 3 has better TypeScript support;
- The new API for components Composition API was added.
The last update really caught my interest because I often work with different JavaScript data visualization components, and I was curious how this enhancement will affect my web development process. As the Vue experts convince — in no way.
This The API is just an addition to the language which does not affect the previous capabilities of the framework. On the contrary, it was created to address the limitations of the Options API used in Vue 2 and is an alternative way to work with components. The old approach is still usable in Vue 3 but has TypeScript limitations and when your components get larger readability gets difficult.
Thus, Composition API is more a matter of convenience and optimization of work processes than some kind of innovation. However, this did not stop my desire to try this thing in action.
For a test project, I decided to use Flexmonster Pivot Table and Charts and Highcharts libraries as I have already used them before and they had an integration with Vue 3. But what’s more important Flexmonster team has created a special sample project on GitHub where you can check the usage of their component with both 2 and 3 versions of Vue.js and as well as Highcharts integration. This project also contains examples of Composition and Options API’s usage.
So for my research objectives, it was a perfect match as I could compare them and decide on what to use in a real project.
To work with Vue, you will need Node.js and npm. To check their presence on your machine run:
node -vnpm -v
If they are absent then stop right here and install them.
Of course, our task also requires Vue CLI and if you still don’t have to use this command:
npm install -g @vue/cli
Another required tool is Flexmonster CLI, which is the most convenient way to work with the pivot grid library. You can install it using npm:
npm install -g flexmonster-cli
And the last step of our preparation is to install Highcharts via npm:
npm i — save vue3-highcharts
Now we are ready to start the work.
As I haven’t had where to embed the component yet I will create it from the start:
vue create project-namecd project-name
After this, you will be able to choose a preset for your project. This time I prefer the default one.
Before starting the integration, I wanted to see the example of a Composition API implementation, so I went to Flexmonster GitHub and gave a look at what they suggested.
The only change is adding a component to the project for Vue 2 and Vue 3 samples was the addition of the following lines:
import {defineComponent} from ‘vue’;export default defineComponent({…})
Not a big deal. Comparing the two files with Option and Composition API in Vue 3, I noticed a little bit more.
Composition API:
Option API:
So using Composition API, you need to pass ref variable to the script and refer to it and not directly reach the component.
You can choose any of these two approaches, but personally, I decided to give a try to Composition API. With that in mind, I started to code.
So firstly, you need to install the Flexmonster Vue module by running this CLI command from the folder with package.json:
flexmonster add vue-flexmonster
Now I will locally register vue-flexmonster. To do it I added the following code in the <script> section of the component where you need the pivot table:
The last step is adding the pivot table instance to a Vue component by including the Pivot module in the <template> section of the chosen component:
Firstly import charts into the Vue 3 app:
import Highcharts from “highcharts”;
Then we will need to add a special connector to pass the data and several methods to the script that will help with communication between charts and pivot grid:
Finally, to display our charts on the page lets put a container with Highcharts under the pivot table in the template:
<div class=”chart-container”><div id=”highcharts-container”></div></div>
Simply run your application from the console:
npm run serve
And get your result on http://localhost:8080/ in your browser.
Using the Composition API is not much more complicated than the default one, but we’ll see how well it copes with its task in a working project.
If you got interested in this topic, you could also learn more about this approach in this Vue.js video tutorial on learning Vue 3 Composition API with a simple Todos example.
If this tutorial were helpful for you, I would be thrilled to hear your feedback and ideas about Vue 3 and this integration.
- Vue 3 API documentation
- Flexmonster Pivot Table and Charts Vue 3 documentation
- Highcharts documentation
- Downloading and installing Node.js and npm guide
- Flexmonster CLI overview
- Video tutorial on a Composition API