This guide will walk you through the process of integrating WebDataRocks with Vue.js.
Before starting, make sure that Node.js is installed on your machine.
Next, choose one of the following guides:
Step 1. Download or clone the 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 the project:
npm run serve
The sample project will be available at http://localhost:8080/
.
You can shut down the app with Ctrl + C
.
The below guidelines describe how to integrate WebDataRocks with Vue 2. If you’re interested in integrating with Vue 3, see this guide: Integrate WebDataRocks into a Vue 3 project.
Step 1. Unless you already have a Vue 2 project, create one with the following command:
npm create vue@2
During the creation process, you will be prompted to choose configurations for your project. Choose No
for all the configs for simplicity.
Step 2. Install npm packages for the project:
cd <project-name> npm install
Step 3. Get the WebDataRocks Vue wrapper from npm:
npm install @webdatarocks/vue-webdatarocks
Step 4. Register 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 5. Add Pivot
to the <template>
tag of the component (e.g., src/App.vue
):
<template> <div id="app"> <Pivot report="https://cdn.webdatarocks.com/reports/report.json" toolbar /> </div> </template>
Note that the <template>
must contain only one root <div>
element.
Step 6. Run your app:
npm run dev
Your WebDataRocks & Vue 2 project will be available at http://localhost:5173/
.
You can shut down the app with Ctrl + C
.
Follow the steps below to integrate WebDataRocks with Vue 3.
Step 1. If you don’t have a Vue 3 project, create one:
npm create vue@3
During the creation process, you will be prompted to choose configurations for your project. Choose No
for all the configs for simplicity.
Step 2. Install npm packages for the project:
cd <project-name> npm install
Step 3. Install WebDataRocks from npm:
npm install @webdatarocks/webdatarocks
Step 4. Download the Pivot.vue
file from our GitHub and place it in the src/components/
folder.
Step 5. 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 6. 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 7. Import WebDataRocks CSS:
<script setup> import Pivot from "./components/Pivot.vue"; import "@webdatarocks/webdatarocks/webdatarocks.css"; </script>
Step 8. Add WebDataRocks to the <template>
tag of the component (e.g., src/App.vue
):
<template> <Pivot toolbar report="https://cdn.webdatarocks.com/reports/report.json" /> </template>
Step 9. Run the app:
npm run dev
Your WebDataRocks & Vue 3 project will be available at http://localhost:5173/
.
You can shut down the app with Ctrl + C
.