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.
npm install -g flexmonster-cli
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
You will be prompted to choose optional features for the project. For simplicity, choose No for all the features.
npm create 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 dependencies needed for the project:
cd <your-project-name> && npm install
Learn more about creating a new project in the Vue documentation.
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.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.
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:
We prepared the following examples of Flexmonster usage: