Get Free Trial
  1. API reference
Connecting to Data Source
Configuring the component
  • Documentation for older versions
  • Table of contents

    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


    This guide contains the following sections:

    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

    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:

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

    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 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);
      Now, any component in your application can 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: