We have updated WebDataRocks EULA, effective as of April 18, 2024. Learn more about what's changed.

Is it possible to integrated with Vue?


Hi, webdatarocks team!
Is it possible to integrated with Vue?
If yes, can you guys point to any example?

1 answer

WebDataRocks Team WebDataRocks November 6, 2019

Hello, Zaihzhang,
Thank you for your question.
We kindly recommend following the instruction below to set up a vue-cli application with WebDataRocks embedded:

  1. If Vue isn’t installed on your computer, run the next command:
    npm install -g @vue/cli
  2. Create simple Vue app:
    vue create my-project
  3. Open created project as the current folder:
    cd my-project
  4. Install WebDataRocks:
    npm i webdatarocks --save
  5. Open public/index.html and create a container for the future pivot table:
    <div id="pivot-container">The component will appear here</div>
  6. Add the following code to the head section in case you need the toolbar:
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>Start your code here
  7. Open src/App.vue,find the <script> tag starting as import HelloWorld from ‘./components/HelloWorld.vue’ and embed WebDataRocks:

    import HelloWorld from './components/HelloWorld.vue'
    export default {  name: 'app',  components: {    HelloWorld  }}

    import WebDataRocks from 'webdatarocks';
    import 'webdatarocks/webdatarocks.min.css';

    new WebDataRocks({    
    container: "#pivot-container",    
    toolbar: true

  8. Check out the README.md file inside the folder containing your project, run commands which you will find there. Usually to setup and compile the project to see the result you have to run the following commands:
    npm install
    npm run serve
  9. After these steps, you will be informed about local and network addresses, where you can check the result.

We hope it helps.
Feel free to contact us in case of questions occurs.
Kind Regards,
WebDataRocks Team