Integration with Vue 2

This tutorial will help you integrate Flexmonster with Vue 2.

To integrate Flexmonster with Vue 3, see this guide: Integration with Vue 3.

Prerequisites

Node.js and npm
Vue CLI
Flexmonster CLI
Install it with the following command:
```
npm install -g flexmonster-cli
```

This guide contains the following sections:

Run a sample Vue 2 project from GitHub
Integrate Flexmonster into a Vue 2 application
See the examples of Flexmonster usage in Vue 2

Run a sample Vue 2 project from GitHub

Download the sample project with the flexmonster create command. You can choose either the ES6 or TypeScript project:

Vue 2 + ES6

flexmonster create vue 2 es6 -r

The flexmonster create vue 2 es6 command does the following:

Downloads the .zip archive with the sample Vue 2 + ES6 project from GitHub.
Automatically unpacks the files in the current folder — as a result, the flexmonster-vue-2-es6-project/ folder will appear in your working directory.

The -r option, which is short for --run, completes the following tasks:

Installs all the npm dependencies described in package.json.
Compiles the application and runs it in the browser.

Vue 2 + TypeScript

flexmonster create vue 2 typescript -r

The flexmonster create vue 2 typescript command does the following:

Downloads the .zip archive with the sample Vue 2 + TypeScript project from GitHub.
Automatically unpacks the files in the current folder — as a result, the flexmonster-vue-2-typescript-project/ folder will appear in your working directory.

The -r option, which is short for --run, completes the following tasks:

Installs all the npm dependencies described in package.json.
Compiles the application and runs it in the browser.

The application can be shut down manually with Ctrl + C.

Integrate Flexmonster into a Vue 2 application

Follow the steps below to integrate Flexmonster Pivot into a new Vue 2 application. If you already have a Vue project, jump to Step 2. Install Flexmonster.

To integrate Flexmonster with Vue 3, see this guide: Integration with Vue 3.

Step 1. Create a Vue 2 project

If you don’t have a Vue app yet, create one by running the following commands in the console. You can choose between ES6 and TypeScript projects:

Vue 2 + ES6

vue create project-name
cd project-name

When running the vue create command, you will be prompted to pick a preset for your project. For simplicity, choose the default Vue 2 preset:

Vue 2 + TypeScript

vue create project-name
cd project-name

When running the vue create command, you will be prompted to pick a preset for your project. To create a Vue 2 + TypeScript app, choose Manually select features.

In the features menu, check the TypeScript option with Space and press Enter:

For other settings, choose default values.

Step 2. Install Flexmonster

Install the Flexmonster Vue module by running the following CLI command from the folder containing package.json:

flexmonster add vue-flexmonster

The add command installs the vue-flexmonster package to node_modules/ and adds it as an npm dependency to package.json.

Step 3. Declare the vue-flexmonster module in shims.vue.d.ts

This step is only for Vue 2 + TypeScript projects. If you have a Vue 2 + ES6 app, proceed to Step 4. Register the vue-flexmonster module.

To use the vue-flexmonster module in a Vue 2 + TypeScript project, declare it in the src/shims.vue.d.ts file:

declare module '*.vue' {
	import Vue from 'vue'
	export default Vue
}

declare module "vue-flexmonster"

Step 4. Register the vue-flexmonster module

The vue-flexmonster module can now be registered in your project either globally or locally.

Vue 2 + ES6

To register vue-flexmonster globally, add the following code after the existing imports in src/main.js:

// Using vue-flexmonster globally
// 1. Import the vue-flexmonster module and CSS styles 
import Pivot from "vue-flexmonster"; 
import 'flexmonster/flexmonster.css'; 
 
// 2. Refer to the vue-flexmonster module as a plugin 
Vue.use(Pivot);

Any component in your application can now use the Pivot component.

To register vue-flexmonster locally, insert the following code in the <script> section of the component where you need the pivot table (e.g., in src/App.vue):

<script> 
// Using vue-flexmonster locally 
// 1. Import the vue-flexmonster module and CSS styles 
import Pivot from "vue-flexmonster"; 
import 'flexmonster/flexmonster.css'; 

// 2. Define the module in the components list 
export default { 
    name: 'app', 
    components: { 
        Pivot 
    } 
} 
</script>

Vue 2 + TypeScript

To register vue-flexmonster globally, add the following code after the existing imports in src/main.ts:

// Using vue-flexmonster globally
// 1. Import the vue-flexmonster module and CSS styles 
import Pivot from "vue-flexmonster"; 
import 'flexmonster/flexmonster.css'; 
 
// 2. Refer to the vue-flexmonster module as a plugin 
Vue.use(Pivot);

Any component in your application can now use the Pivot component.

To register vue-flexmonster locally, insert the following code in the <script> section of the component where you need the pivot table (e.g., in src/App.vue):

<script lang="ts"> 
// Using vue-flexmonster locally 
// 1. Import the vue-flexmonster module and CSS styles 
import Pivot from "vue-flexmonster"; 
import 'flexmonster/flexmonster.css'; 
import Vue from 'vue';
 
// 2. Define the module in the components list 
export default Vue.extend({ 
    name: 'app', 
    components: { 
        Pivot 
    } 
}) 
</script>

Step 5. Add a Flexmonster instance to a Vue component

Include the Pivot module in the <template> section of the chosen component (e.g., in src/App.vue). Make sure the component template contains exactly one root <div> element.

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

This step mentions only some of the Pivot props. These props are equivalent to Flexmonster’s initialization parameters. See the full list of available parameters.

Step 6. Run the project

Run your application from the console:

npm run serve

To see the result, open http://localhost:8080/ in your browser.

The application can be shut down manually with Ctrl + C.

See the examples of Flexmonster usage in Vue 2

Our sample Vue 2 projects contain the following usage examples:

Creating the pivot table
Handling events
Using API calls
Updating data
Customizing the Toolbar
Customizing the grid
Integrating with Highcharts
Integrating with amCharts

Learn more about each of these examples in our guide: Flexmonster usage in Vue 2.

What’s next?

You may be interested in the following articles: