This tutorial will help you integrate Flexmonster with Vue 2.
To test Flexmonster in a ready-to-use Vue 2 application, use our sample project.
To integrate with Vue 3, see Integration with Vue 3.
npm install -g flexmonster-cli
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
You will be prompted to choose optional features for the project. For simplicity, choose No for all the features.
npm create vue@2
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
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 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. These props are equivalent to Flexmonster’s initialization parameters. See the full list of available parameters.
Run your application from the console:
npm run dev
Open your project in the browser to see the result.
We prepared the following examples of Flexmonster usage: