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 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. 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 one with the following command:

vue create project-name
cd project-name

During the creation process, you will be prompted to choose configurations for your project. Choose the default Vue 2 preset.

Step 3. Get the WebDataRocks Vue module from npm:

npm install vue-webdatarocks

Step 4. Register WebDataRocks in your Vue project using one of the following approaches:

  • Register globally in the src/main.js file:
    // other imports
    import Pivot from 'vue-webdatarocks';
    import 'webdatarocks/webdatarocks.css';
     
    Vue.use(Pivot);
    //other code
  • Register locally in the component where you need the pivot table (e.g., src/App.vue):
    <script> 
    import {Pivot} from 'vue-webdatarocks';
    import 'webdatarocks/webdatarocks.css';

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

Step 5. 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 6. Run your app:

npm run serve

Your WebDataRocks & Vue 2 project will be available at http://localhost:8080/.

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:

vue create vue-3-project
cd vue-3-project

During the creation process, you will be prompted to choose configurations for your project. Choose the default Vue 3 preset. 

Step 2. Install WebDataRocks from npm:

npm install webdatarocks

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

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

<script>
import Pivot from "./components/Pivot";
 
export default {
    name: "App",
    components: {
        Pivot,
    },
};
</script>

Step 5. Import WebDataRocks CSS:

<script>
import Pivot from "./components/Pivot";
import "webdatarocks/webdatarocks.css";
 
export default {
    name: "App",
    components: {
        Pivot,
    },
};
</script>

Step 6. 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 7. Run the app:

npm run serve

Your WebDataRocks & Vue 3 project will be available at http://localhost:8080/.

See also