vue-flexmonster

VueJS module for Flexmonster Pivot Table & Charts

Website: www.flexmonster.com

Flexmonster Pivot Table & Charts

Flexmonster Pivot is a powerful JavaScript tool for interactive web reporting. It allows you to visualize and analyze data from JSON, CSV, SQL, NoSQL, Elasticsearch, and OLAP data sources fast and conveniently. Flexmonster is designed to integrate seamlessly with any client-side framework and can be easily embedded into your application.

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 Vue 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
  }
}

3) Add the module to the template section

3.1) 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>

4) Run the project

4.1) Run your application from the console:

npm run serve

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

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

Sample Project

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.