Get Free Trial
Get Free Trial
  1. API reference
Welcome
Integration with frameworks
  1. Available tutorials
    2. Angular
    React
    Vue
      Vue 3
      1. Sample Vue 3 project
      2. Integration with Vue 3
      3. Usage examples
      Vue 2
    Other integrations
Connecting to Data Source
Configuring the component
Saving component configs
Customizing
Charts
Accessibility
Security
Updating to the latest version
Flexmonster CLI Reference
  • Documentation for older versions
    • Table of contents

    Sample Vue 3 project

    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.

    Prerequisites

    Step 1. Get the sample Vue 3 project

    Download the sample project with the flexmonster create command. You can choose an ES6-based or TypeScript-based project:

    ES6

    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.

    TypeScript

    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.

    Step 2. Check out the project’s structure

    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:
      • Creating the pivot table (PivotTableDemo.vue)
      • Interacting with Flexmonster in Composition API (CompositionAPIDemo.vue)
      • Handling events (HandlingEvents.vue)
      • Using API calls (UsingAPICalls.vue)
      • Updating data at runtime (UpdatingData.vue)
      • Customizing the Toolbar (CustomizingToolbar.vue)
      • Customizing the grid (CustomizingGrid.vue)
      • Integrating with Highcharts (WithHighcharts.vue)
      • Integrating with amCharts (WithAmcharts.vue)

    Learn more about how these demos work: Usage examples.

    What’s next?

    Integrate with an existing project: Integration with Vue 3.

    Or adjust the sample project to your needs: