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
.
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 5. 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"
Now the vue-flexmonster
module can 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 globallyNow, any component in your application can 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 globallyNow, any component in your application can 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.
You may be interested in the following articles: