Vue module for Flexmonster Pivot Table & Charts

Website: www.flexmonster.com

This repository holds the source code for using Flexmonster Pivot in Vue applications.

• Getting started
• Usage
• Sample Project
• License
• Support & feedback

Getting Started

If you don’t have Vue app, you can create it by running in the console:

vue create my-app
cd my-app

Install the Flexmonster Vue module by running in the console:

npm i --save vue-flexmonster

Install the Flexmonster module by running in the console:

npm i --save flexmonster

Usage

The Flexmonster Vue module can be used as a plugin or locally.

1) Use Flexmonster Vue module as a Vue plugin

1.1) Add the following lines to the main.js file:

import Pivot from "vue-flexmonster";
import 'flexmonster/flexmonster.css';

Vue.use(Pivot);

Now Pivot can be used by any component in your application.

2) Register Flexmonster Vue module locally

2.1) Import vue-flexmonster in App.vue:

import {Pivot} from "vue-flexmonster";
import 'flexmonster/flexmonster.css';

2.2) Add the module to the components property in App.vue:

export default {
  name: 'app',
  components: {
    Pivot
  }
}

After defining as a plugin or local component, include the module in <template></template> in App.vue:

<template>
  <div id="app">
     <Pivot
      ref="pivot"
      toolbar
      v-bind:report="'https://cdn.flexmonster.com/reports/report.json'"
     ></Pivot>
  </div>
</template>

Run your application from the console:

npm run serve

The project should be available at http://localhost:8080/.

For more details please refer to Flexmonster Integration with Vue tutorial.

Sample Project

Please see our sample Vue project using the Flexmonster Vue module.

License

Here is Flexmonster licensing page. We have a free 30-day trial!

Flexmonster Vue module is released as an MIT-licensed add-on to Flexmonster Pivot.

Support & feedback

Please share your feedback or ask questions via Flexmonster Forum.