Get Free Trial
  1. API reference
  2. Welcome
    1. Introduction
    2. Get Flexmonster
    3. Quick start
    4. System requirements
    5. Troubleshooting
    6. Managing license keys
    7. Migrating from WebDataRocks to Flexmonster
  3. Integration with frameworks
    1. Available tutorials
    2. Angular
      1. Integration with Angular
      2. Flexmonster usage in Angular
    3. React
      1. Integration with React
      2. Flexmonster usage in React
    4. Vue
      1. Integration with Vue 2
      2. Flexmonster usage in Vue 2
      3. Integration with Vue 3
      4. Flexmonster usage in Vue 3
    5. Other integrations
      1. Integration with Python
        1. Integration with Django
        2. Integration with Jupyter Notebook
      2. Integration with React Native
      3. Integration with Blazor
      4. Integration with AngularJS (v1.x)
      5. Integration with TypeScript
      6. Integration with R Shiny
      7. Integration with jQuery
      8. Integration with Ionic
      9. Integration with Electron.js
      10. Integration with Webpack
      11. Integration with RequireJS
  4. Connecting to Data Source
    1. Supported data sources
    2. JSON
      1. Connecting to JSON
      2. Connecting to JSON using Flexmonster Data Server
      3. Managing data presentation in JSON
    3. CSV
      1. Connecting to CSV
      2. Connecting to CSV using Flexmonster Data Server
      3. Managing data presentation in CSV
    4. Database
      1. Connecting to SQL databases
      2. Connecting to a MySQL database
      3. Connecting to a Microsoft SQL Server database
      4. Connecting to a PostgreSQL database
      5. Connecting to an Oracle database
    5. Flexmonster Data Server
      1. Introduction to Flexmonster Data Server
      2. Getting started with Flexmonster Data Server
      3. Flexmonster Admin Panel Guide
      4. Data sources guide
      5. Security and authorization guide
      6. The Data Server as a DLL
        1. Getting started with the Data Server as a DLL
        2. Referencing the Data Server as a DLL
        3. Implementing the API controller
        4. Implementing the server filter
        5. Implementing the custom parser
        6. DLL configurations reference
        7. The controller's methods for request handling
      7. The Data Server as a console application
        1. Installing the Data Server as a console application
        2. Configurations reference
        3. Data sources guide
        4. Security and authorization guide
      8. Troubleshooting the Data Server
    6. MongoDB
      1. Introduction to Flexmonster MongoDB Connector
      2. Getting started with the MongoDB Connector
      3. Embedding the MongoDB Connector into the server
      4. Configuring the MongoDB Connector
    7. Microsoft Analysis Services
      1. Connecting to Microsoft Analysis Services
      2. Getting started with Flexmonster Accelerator
      3. Referencing the Accelerator as a DLL
      4. Configuring the authentication process
      5. Configuring a secure HTTPS connection
      6. Troubleshooting
    8. Custom data source API
      1. Introduction to the custom data source API
      2. A quick overview of a sample Node.js server
      3. A quick overview of a sample .NET Core server
      4. Implement your own server
        1. Implementing the custom data source API server
        2. Implementing filters
        3. Supporting more aggregation functions
        4. Supporting multilevel hierarchies
        5. Returning data for the drill-through view
        6. Testing your custom data source API server
    9. Elasticsearch
      1. Connecting to Elasticsearch
      2. Configuring the mapping
    10. Connecting to other data sources
  5. Accessibility
    1. Accessibility overview
    2. Keyboard navigation
  6. Configuring the component
    1. Available tutorials
    2. Getting started with the report
    3. Configure the data source
      1. Data source
      2. Mapping
    4. Define which data to show
      1. Slice
      2. Custom sorting
      3. Calculated values
    5. Manage Flexmonster’s functionality
      1. Options
      2. Configuring global options
    6. Format fields
      1. Number formatting
      2. Date and time formatting
      3. Conditional formatting
  7. Saving component configs
    1. Save and restore the report
    2. Share the report
    3. Export and print
  8. Charts
    1. Available tutorials
    2. Flexmonster Pivot Charts
    3. Integration with Highcharts
    4. Integration with amCharts
    5. Integration with Google Charts
    6. Integration with FusionCharts
    7. Integration with any charting library
  9. Customizing
    1. Available tutorials
    2. Customizing the Toolbar
    3. Customizing appearance
    4. Customizing the context menu
    5. Customizing the grid
    6. Customizing the pivot charts
    7. Localizing the component
  10. Security
    1. Security in Flexmonster
    2. Security aspects of connecting to an OLAP cube
      1. Ways of connecting to an OLAP cube
      2. The data transfer process
      3. Data security
      4. Data access management
  11. Updating to the latest version
    1. Updating to the latest version
    2. Release notes
    3. Migration guide from 2.8 to 2.9
    4. Migration guide from 2.7 to 2.8
    5. Migration guide from 2.6 to 2.7
    6. Migration guide from 2.5 to 2.6
    7. Migration guide from 2.4 to 2.5
    8. Migration guide from 2.3 to 2.4
    9. Migration guide from 2.2 to 2.3
  12. Flexmonster CLI Reference
    1. Overview
    2. Troubleshooting the CLI
    3. flexmonster create
    4. flexmonster add
    5. flexmonster update
    6. flexmonster version
    7. flexmonster help
  13. Documentation for older versions
Table of contents

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:

  1. Run a sample Vue 2 project from GitHub
  2. Integrate Flexmonster into a Vue 2 application
  3. 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:

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:

Check the TypeScript option

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: