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:
- Run the sample Vue 2 project from GitHub
- Integrate WebDataRocks into a Vue 2 project
- 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/
.