Integration with Vue 2

This tutorial will help you integrate Flexmonster with the Vue 2 framework.

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

Prerequisites

To work with Vue, you will need Node.js and npm. Get them here if they are not already installed on your machine.

Another required tool is Flexmonster CLI, which is the most convenient way to work with Flexmonster. Install the CLI globally using npm:

npm install -g flexmonster-cli

Now a new flexmonster command is available in the console. Learn more about Flexmonster CLI and its commands in our documentation.

Now, choose one of the following options:

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

Create 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 these 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 these 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 the Vue project, jump to Step 3. Install Flexmonster.

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

Step 1. Install the Vue CLI

For this tutorial, you will need the Vue CLI. If it is not installed, run the following command in the console to install it globally:

npm install -g @vue/cli

Step 2. Create a Vue 2 project

If you don’t have a Vue CLI app, 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 3. Install Flexmonster

Install the Flexmonster Vue module by running this 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 4. 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 5. Register the vue-flexmonster module.

To use the vue-flexmonster module in a Vue 2 + TypeScript project, add its declaration to the src/shims.vue.d.ts file:

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

declare module "vue-flexmonster"

Step 5. Register the vue-flexmonster module

Now the vue-flexmonster module can 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);

Now, any component in your application can use the Pivot.

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

Now, any component in your application can use the Pivot.

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 6. 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 7. 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: