This tutorial will help you integrate Flexmonster with Vue 2.
To integrate Flexmonster with Vue 3, see this guide: Integration with Vue 3.
npm install -g flexmonster-cli
This guide contains the following sections:
Download the sample project with the flexmonster create
command. You can choose either the ES6 or TypeScript project:
flexmonster create vue 2 es6 -r
The flexmonster create vue 2 es6
command does the following:
.zip
archive with the sample Vue 2 + ES6 project from GitHub.flexmonster-vue-2-es6-project/
folder will appear in your working directory.The -r
option, which is short for --run
, completes the following tasks:
package.json
.flexmonster create vue 2 typescript -r
The flexmonster create vue 2 typescript
command does the following:
.zip
archive with the sample Vue 2 + TypeScript project from GitHub.flexmonster-vue-2-typescript-project/
folder will appear in your working directory.The -r
option, which is short for --run
, completes the following tasks:
package.json
.The application can be shut down manually with Ctrl + C
.
If any errors appear while running our sample project, refer to the troubleshooting section.
Follow the steps below to integrate Flexmonster Pivot into a new Vue 2 application. If you already have a Vue project, jump to Step 2. Install Flexmonster.
To integrate Flexmonster with Vue 3, see this guide: Integration with Vue 3.
If you don’t have a Vue app yet, create one by running the following commands in the console. You can choose between ES6 and TypeScript projects:
vue create project-name
cd project-name
When running the vue create
command, you will be prompted to pick a preset for your project. For simplicity, choose the default Vue 2 preset:
vue create project-name cd project-name
When running the vue create
command, you will be prompted to pick a preset for your project. To create a Vue 2 + TypeScript app, choose Manually select features.
In the features menu, check the TypeScript option with Space
and press Enter
:
For other settings, choose default values.
Install the Flexmonster Vue module by running the following CLI command from the folder containing package.json
:
flexmonster add vue-flexmonster
The add
command installs the vue-flexmonster
package to node_modules/
and adds it as an npm dependency to package.json
.
This step is only for Vue 2 + TypeScript projects. If you have a Vue 2 + ES6 app, proceed to Step 4. Register the vue-flexmonster module.
To use the vue-flexmonster
module in a Vue 2 + TypeScript project, declare it in the src/shims.vue.d.ts
file:
declare module '*.vue' { import Vue from 'vue' export default Vue } declare module "vue-flexmonster"
The vue-flexmonster
module can now be registered in your project either globally or locally.
vue-flexmonster
globally, add the following code after the existing imports in src/main.js
: // Using vue-flexmonster globallyAny component in your application can now use the
// 1. Import the vue-flexmonster module and CSS styles
import Pivot from "vue-flexmonster";
import 'flexmonster/flexmonster.css';
// 2. Refer to the vue-flexmonster module as a plugin
Vue.use(Pivot);
Pivot
component.vue-flexmonster
locally, insert the following code in the <script>
section of the component where you need the pivot table (e.g., in src/App.vue
):<script>
// Using vue-flexmonster locally
// 1. Import the vue-flexmonster module and CSS styles
import Pivot from "vue-flexmonster";
import 'flexmonster/flexmonster.css';
// 2. Define the module in the components list
export default {
name: 'app',
components: {
Pivot
}
}
</script>
vue-flexmonster
globally, add the following code after the existing imports in src/main.ts
: // Using vue-flexmonster globallyAny component in your application can now use the
// 1. Import the vue-flexmonster module and CSS styles
import Pivot from "vue-flexmonster";
import 'flexmonster/flexmonster.css';
// 2. Refer to the vue-flexmonster module as a plugin
Vue.use(Pivot);
Pivot
component.vue-flexmonster
locally, insert the following code in the <script>
section of the component where you need the pivot table (e.g., in src/App.vue
):<script lang="ts">
// Using vue-flexmonster locally
// 1. Import the vue-flexmonster module and CSS styles
import Pivot from "vue-flexmonster";
import 'flexmonster/flexmonster.css';
import Vue from 'vue';
// 2. Define the module in the components list
export default Vue.extend({
name: 'app',
components: {
Pivot
}
})
</script>
Include the Pivot
module in the <template>
section of the chosen component (e.g., in src/App.vue
). Make sure the component template
contains exactly one root <div>
element.
<template> <div id="app"> <Pivot ref="pivot" v-bind:report="'https://cdn.flexmonster.com/reports/report.json'"> </Pivot> </div> </template>
This step mentions only some 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 serve
To see the result, open http://localhost:8080/
in your browser.
The application can be shut down manually with Ctrl + C
.
Our sample Vue 2 projects contain the following usage examples:
Learn more about each of these examples in our guide: Flexmonster usage in Vue 2.
This section provides solutions to the errors you may encounter while completing this tutorial. If your error is not listed here, contact our Tech team.
This error may occur when running our sample project using Node.js 17 or later.
Fix this issue in one of the following ways:
package.json
file in the project folder and find the "scripts"
property. Depending on your OS, modify the "scripts"
in the following way:"scripts": { "start": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --open", "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve", "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build", "lint": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint" },
"scripts": { "start": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --open", "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve", "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build", "lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint" },
You may be interested in the following articles: