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

Prerequisites

Before starting, make sure that Node.js and npm are installed on your machine. 

Next, choose one of the following guides:

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

Run the sample 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

Open http://localhost:8080/ in your browser and see the pivot table rendered on the page.

You can shut down the app with Ctrl + C.

Integrate WebDataRocks into a Vue project

Step 1. Install the Vue CLI by running the following command:

npm install -g @vue/cli

Skip this step if the Vue CLI is already installed. 

Step 2. Unless you already have the Vue project, create it with the following command:

vue create project-name
cd project-name

You will be prompted to set configuration options during the creation process. For basic functionality, select the default ones. 

Step 3. Install WebDataRocks:

npm install webdatarocks

Step 4. Download the WebDataRocks.vue file from our GitHub and place it in the src/components/ folder.

Step 5. Import WebDataRocks from WebDataRocks.vue in the component where you need the pivot table (e.g., src/App.vue):

<script>
import WebDataRocks from "./components/WebDataRocks.vue";

// Define WebDataRocks in the list of components
export default {
    name: 'app',
    components: {
       WebDataRocks
    }
}
</script>

Step 6. Add WebDataRocks to the <template> tag of the component (e.g., src/App.vue):

<template>
<div id="app">
       <WebDataRocks
         report="https://cdn.webdatarocks.com/reports/report.json"
toolbar

></WebDataRocks>
   </div>
</template>

Note that the <template> tag must contain only one root <div> element.

Step 7. Run your app:

npm run serve

Open http://localhost:8080/ in your browser and see the pivot table rendered on the page.

You can shut down the app with Ctrl + C.

See also