Get Free Trial
  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 project using Options API. To embed Flexmonster using Composition API, see this example: Interacting with Flexmonster in 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. They are equivalent to Flexmonster’s initialization parameters. See the full list of available parameters.

    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