How to create a reporting app with Vue 3 and Composition API ?
Approach: In this article, we will create a reporting app with Vue 3 and Composition API. For a project, we will use Flexmonster Pivot Table & Charts and Highcharts libraries as they have an integration with Vue 3. 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 as well as Highcharts integration. This project also contains examples of Composition and Options API’s usage.
First of all, we will create the Vue project by entering CLI command. Then we will add a Flexmonster instance to the web page, connect it to the charting library and then add the charts.
Now let’s see the step-by-step implementation on how to create an app in Vue 3.
Prerequisite: To work with Vue, you will need Node.js and npm. To check their presence on your machine run the following command in the command line:
node -v npm -v
If they are absent, install them.
Use this command to install Vue CLI:
npm install -g @vue/cli
Another required tool is Flexmonster CLI. You can install it using npm:
npm install -g flexmonster-cli
Then install Highcharts via npm:
npm i --save vue3-highcharts
Step 1: Create a simple Vue app.
vue create first-project cd first-project
After this, you will be able to choose a preset for your project. We will choose the default one.
The project structure should look like this:
Step 2: install the Flexmonster Vue module by running this CLI command from the folder with package.json.
flexmonster add vue-flexmonster
Now will locally register vue-flexmonster. To do it, I add the following code in the <script> section of the component where you need the pivot table:
Add the pivot table instance to a Vue component by including the Pivot module in the <template> section of the chosen component:
Step 3: Import charts into the Vue 3 app and add a special connector and several methods to the script that will help with communication between charts and pivot grid.
To display the charts on the page we will put a container with Highcharts under the pivot table in the template tag so it looks like this:
Step to run the application: Open the terminal and run the project using the command.
npm run serve
Output: The result will be seen on http://localhost:8080/ in your browser.