Integration with Vue

This guide will walk you through the process of integrating WebDataRocks with Vue.js.

Prerequisites

Before starting, make sure that Node.js is installed on your machine. 

Next, choose one of the following guides:

1. Run the sample Vue 2 project from GitHub
2. Integrate WebDataRocks into a Vue 2 project
3. Integrate WebDataRocks into a Vue 3 project

Run the sample Vue 2 project from GitHub

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.

Integrate WebDataRocks into a Vue 2 project

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.

Integrate WebDataRocks into a Vue 3 project

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.

See also

• Configuring fields
• Saving and opening reports
• Using the Toolbar