Documentation menu

Embed the Flexmonster UI

This tutorial describes how to start using the Flexmonster UI in your Vue project.

You can also try out the component using our sample Vue project.

Prerequisites

Step 1. (optional) Create a Vue 3 application

Skip this step if you already have a Vue 3 app.

Step 1.1. Start creating a Vue 3 app with create-vue:

npm create vue@latest

You will be prompted to choose optional features for the project. For simplicity, choose No for all the features.

Step 1.2. Install npm dependencies needed for the project:

cd <your-project-name> && npm install

Learn more about creating a new project in the Vue documentation.

Step 2. Get Flexmonster

To get Flexmonster for Vue, run the following command inside your project:

npm install @flexmonster/vue

This command downloads the @flexmonster/vue wrapper to node_modules/ and adds it as a dependency to package.json.

Step 3. Embed the Flexmonster UI

Step 3.1. Import Flexmonster in the component where you need the pivot table (e.g., in src/App.vue):

<script setup>
// Import the Flexmonster component and CSS styles
import { FMFlexmonster } from '@flexmonster/vue'
import '@flexmonster/js/flexmonster.css';
</script>

Step 3.2. Use the <FMFlexmonster> tag to add a Flexmonster instance to the chosen component (e.g., src/App.vue):

<template>
  <FMFlexmonster />
</template>

Step 4. Connect the Flexmonster UI to the sample data source

In this step, we will connect Flexmonster UI to the sample data hosted on the Flexmonster server. If you do not have the server yet, install the Flexmonster server.

Step 4.1. Create a state object with connection parameters for the sample data source:

const state = {
  id: "fm-state",
  dataset: {
    dataSource: {
      url: "ws://localhost:9501/",
      name: "SampleData"
    }
  }
};

The url contains the server’s URL, and the name is the data source’s name. You can check out the data source name in the Admin Panel’s Data sources tab.

Step 4.2. Pass the state object to the Flexmonster instance:

<template>
  <FMFlexmonster
    :state="state"
  />
</template>

Step 5. Run the application

Run your application from the console:

npm run dev

Open your project in the browser to see the result.

Next step