Integration with Vue 3

This tutorial will help you integrate Flexmonster with Vue 3. Watch the tutorial in the video format: Vue pivot table guide.

Flexmonster has a 30-day free trial, with no registration required to start the evaluation. You can also test the component using our sample Vue 3 project or the Vue pivot table demo.

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

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 3 application

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

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

npm create vue@latest

npm create vue@latest

Step 1.2. Install npm dependencies needed for the project:

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

Learn more about creating a new project in the Vue documentation.

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/vue3 module in the env.d.ts file:

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

declare module "vue-flexmonster/vue3"

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

Step 3.2. Import vue-flexmonster/vue3 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/vue3";
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/vue3";
import "flexmonster/flexmonster.css";

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
  // Register the Pivot component with the components option
  components: {
    Pivot,
  },
});
</script>

Note In the code snippet above, Flexmonster is added to the Options API project. To embed Flexmonster when using Composition API, see this example: Interacting with Flexmonster when using Composition API.

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

<template>
  <Pivot
    toolbar
  />
</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.

You can also watch our video tutorial that covers the integration process:

Usage examples

We prepared the following examples of Flexmonster usage:

• Creating the pivot table
• Interacting with Flexmonster when using CompositionAPI
• Handling events
• Using API calls
• Updating data
• Customizing the Toolbar
• Customizing the grid
• Integrating with Highcharts
• Integrating with amCharts

See also

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