This guide will help you run a sample Vue 3 project. It is a ready-to-use application with several live Flexmonster demos. Get the sample project to try out Flexmonster.
To integrate with an existing Vue project, see integration with Vue 3.
npm install -g flexmonster-cli
Download the sample project with the flexmonster create command. You can choose an ES6-based or TypeScript-based project:
flexmonster create vue 3 es6 -r
This command downloads the Vue 3 + ES6 project and launches it in the browser. To shut down the project from the console, press Ctrl + C
.
The sample project is located inside the flexmonster-vue-3-es6-project/
folder in your current working directory.
flexmonster create vue 3 typescript -r
This command downloads the Vue 3 + TypeScript project and launches it in the browser. To shut down the project from the console, press Ctrl + C
.
The sample project is located inside the flexmonster-vue-3-typescript-project/
folder in your current working directory.
If any errors appear at this step, refer to the troubleshooting section.
Our sample project was created with Vue CLI, so most of the project’s files are typical of CLI-generated projects.
Now take a look at the files specific to our sample project:
src/router/index.js
(index.ts
in TypeScript) — route definitions for the sample project.src/components/UIElements/
— menus and toggle elements used in the sample project.src/views/VueFlexmonsterExamples/
— demos that cover different aspects of Flexmonster usage in Vue:PivotTableDemo.vue
)CompositionAPIDemo.vue
)HandlingEvents.vue
)UsingAPICalls.vue
)UpdatingData.vue
)CustomizingToolbar.vue
)CustomizingGrid.vue
)WithHighcharts.vue
)WithAmcharts.vue
)Learn more about how these demos work: Usage examples.
This section provides solutions to the errors you may encounter while running the sample project. 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" },
Integrate with an existing project: Integration with Vue 3.
Or adjust the sample project to your needs: