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

    Integration with Vue 3

    This tutorial will help you integrate Flexmonster with Vue 3.

    To test Flexmonster in a ready-to-use Vue 3 application, use our sample project.

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

    Prerequisites

    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 the npm init vue command. You can create an ES6-based or TypeScript-based project:

    ES6

    npm init vue@latest

    You will be prompted to choose optional features for the project. For simplicity, choose No for all the features.

    TypeScript

    npm init vue@latest

    You will be prompted to choose additional features for the project. Choose Yes for TypeScript to create a TypeScript project. For simplicity, choose No for other features.

    Step 1.2. Install npm packages 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 from the folder with package.json:

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

    ES6

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

    TypeScript

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

    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

    You can see the result at http://localhost:5173/.

    Usage examples

    We prepared the following examples of Flexmonster usage:

    See also