Integration with Vue 2

This tutorial will help you integrate Flexmonster with Vue 2.

Flexmonster has a 30-day free trial, with no registration required to start the evaluation. You can also test the component in our sample Vue 2 project.

To integrate with Vue 3, see Integration with Vue 3.

Prerequisites

• Node.js 16.0 or later
• Flexmonster CLI
  Install it with the following command:

  npm install -g flexmonster-cli

Step 1. (optional) Create a Vue 2 application

Skip this step if you already have a Vue 2 app.

Step 1.1. Start creating a Vue 2 app with create-vue. You can create an ES6-based or TypeScript-based project:

npm create vue@2

npm create vue@2

Step 1.2. Install npm dependencies needed for the project:

cd <your-project-name> && npm install

Step 2. Get Flexmonster

To get Flexmonster for Vue, run the following command inside your project:

flexmonster add vue-flexmonster

This command downloads the vue-flexmonster wrapper to node_modules/ and adds it as a dependency to package.json.

Step 3. Embed Flexmonster

Step 3.1. If your project is TypeScript-based, declare the vue-flexmonster module in the env.d.ts file:

/// <reference types="vite/client" />

declare module "vue-flexmonster"

Note If your project was generated by Vue CLI, the declare module "vue-flexmonster" line should be added to the src/shims-vue.d.ts file.

Step 3.2. Import vue-flexmonster in the component where you need the pivot table (e.g., in src/App.vue):

<script>
// Import the Pivot component and CSS styles
import Pivot from "vue-flexmonster";
import "flexmonster/flexmonster.css";

export default {
  name: 'app',
  // Register the Pivot component with the components option
  components: {
    Pivot,
  }
}
</script>

<script lang="ts">
// Import the Pivot component and CSS styles
import Pivot from "vue-flexmonster";
import "flexmonster/flexmonster.css";

import Vue from "vue";

export default Vue.extend({
  name: 'app',
  components: {
    // Register the Pivot component with the components option
    Pivot,
  }
})
</script>

Step 3.3. Use the <Pivot> tag to add a Flexmonster instance to the chosen component (e.g., src/App.vue):

<template>
  <div id="app">
    <Pivot
      toolbar
    />
  </div>
</template>

The toolbar is one of the <Pivot> props. Learn more about the <Pivot> component.

Step 4. Run the application

Run your application from the console:

npm run dev

Open your project in the browser to see the result.

Usage examples

We prepared the following examples of Flexmonster usage:

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

Troubleshooting

If you run into any issues during the integration, visit our troubleshooting page. 

Next steps

• Read about the <Pivot> component
• Connect to your data source
• Configure Flexmonster
• Update Flexmonster