Integrating WebDataRocks
These tutorials show how to integrate the WebDataRocks reporting tool with the Vue.js framework using Composition API.
Choose one of the following tutorials:
You can also run our sample project from GitHub.
Prerequisites
Integrate WebDataRocks into a Vue 2 project
The guidelines below describe how to integrate WebDataRocks with Vue 2. You can also integrate WebDataRocks into a Vue 3 project.
Step 1. Create a project (optional)
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
Step 2. Get WebDataRocks
Install the WebDataRocks Vue wrapper from npm:
npm install @webdatarocks/vue-webdatarocks
Step 3. Include 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.
Step 4. See the result
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.
Integrate WebDataRocks into a Vue 3 project
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. Create a project (optional)
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
Step 2. Get WebDataRocks
Install WebDataRocks from npm:
npm install @webdatarocks/webdatarocks
Step 3. Include 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:
Before
<style scoped>
@import '~@webdatarocks/webdatarocks/webdatarocks.min.css';
</style>
After
<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>
Step 4. See the result
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.