vue-flexmonster

Vue module for Flexmonster Pivot Table & Charts

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/.

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.