These tutorials show how to integrate the WebDataRocks reporting tool with the Vue.js framework using Composition API.
Choose one of the following tutorials:
The guidelines below describe how to integrate WebDataRocks with Vue 2. You can also integrate WebDataRocks into a Vue 3 project.
Step 1.1. If you don’t have a Vue 2 application yet, create one by running the following command in the console:
npm create vue@2
During the creation process, you will be prompted to choose configurations for your project. For simplicity, select No for all the configurations.
Step 1.2. Install npm packages for the project:
cd <project-name> npm install
Install the WebDataRocks Vue wrapper from npm:
npm install @webdatarocks/vue-webdatarocks
Step 3.1. Import WebDataRocks in the component where you need the pivot table (e.g., src/App.vue):
<script setup>
import { Pivot } from "@webdatarocks/vue-webdatarocks";
import "@webdatarocks/webdatarocks/webdatarocks.css";
</script>
Step 3.2. Add Pivot to the component’s template:
<template>
<div>
<Pivot
toolbar
/>
</div>
</template>
Note that the <template> must contain only one root <div> element.
Run your application:
npm run dev
Open http://localhost:5173/ in the browser — WebDataRocks is embedded into your Vue 2 project.
You can shut down the app with Ctrl + C.
Follow the steps below to integrate WebDataRocks with Vue 3.
Note that WebDataRocks does not have a ready-to-use Vue 3 wrapper. In this tutorial, the Vue 2 wrapper is used for the integration with Vue 3.
Step 1.1. If you don’t have a Vue 3 application yet, create one by running the following command in the console:
npm create vue@3
During the creation process, you will be prompted to choose configurations for your project. For simplicity, select No for all the configurations.
Step 1.2. Install npm packages for the project:
cd <project-name> npm install
Install WebDataRocks from npm:
npm install @webdatarocks/webdatarocks
Step 3.1. Download the Pivot.vue file from our GitHub and place it in the src/components/ folder.
Step 3.2. In the Pivot.vue file, find the <style> block and edit it as follows:
<style scoped> @import '~@webdatarocks/webdatarocks/webdatarocks.min.css'; </style>
<style scoped> @import '@webdatarocks/webdatarocks/webdatarocks.min.css'; </style>
Step 3.3. Import WebDataRocks from Pivot.vue in the component where you need the pivot table (e.g., src/App.vue):
<script setup> import Pivot from "./components/Pivot.vue"; </script>
Step 3.4. Import WebDataRocks CSS:
<script setup> import Pivot from "./components/Pivot.vue"; import "@webdatarocks/webdatarocks/webdatarocks.css"; </script>
Step 3.5. Add WebDataRocks to the component’s template:
<template>
<div>
<Pivot
toolbar
/>
</div>
</template>
Run your application:
npm run dev
Open http://localhost:5173/ in the browser — WebDataRocks is embedded into your Vue 3 project.
You can shut down the app with Ctrl + C.
Step 1. Download or clone our sample project from GitHub:
git clone https://github.com/webdatarocks/pivot-vue
cd pivot-vue
Step 2. Install the npm packages described in the package.json file:
npm install
Step 3. Run your application:
npm run serve
The sample project will be available at http://localhost:8080/.
You can shut down the app with Ctrl + C.