Integration with Nuxt

This tutorial will help you integrate Flexmonster with Nuxt. The integration process is similar to Flexmonster integration with Vue 3, except for a few Nuxt-specific steps.

Prerequisites

• Node.js 20.0 or later
• Flexmonster CLI
  Install it with the following command:

  npm install -g flexmonster-cli

Run a sample Nuxt project from GitHub

Step 1. To get our sample project, download it as ZIP or clone it with the following commands:

git clone https://github.com/flexmonster/pivot-vue
cd pivot-vue/nuxt

Step 2. Install the project's dependencies:

npm install

Step 3. Run the sample project from the console:

npm start

Open the project in the browser to see the result.

To shut down the project from the console, press Ctrl + C (Control + C on macOS).

Project structure

Our sample project was created using nuxi init, so most of the project’s files are typical of projects created this way. Learn more about the Nuxt directory structure.

Now take a look at the files specific to our sample project:

• components/ — menus and toggle elements used in the sample project.
• plugins/flexmonster.client.js — a Nuxt client-side plugin for Flexmonster.
• app.css — CSS styles for the project.
• nuxt.config.ts — Nuxt configurations. The plugin for Flexmonster is registered here.
• pages/ — demos that cover different aspects of Flexmonster usage in Nuxt:
  • pivot-table-demo.vue — shows how to embed Flexmonster into a Nuxt project using the <Pivot> component.
  • options-api-demo.vue — shows how to embed Flexmonster into a Nuxt project with Options API.
  • handling-events.vue — demonstrates how to handle Flexmonster’s events.
  • using-api-calls.vue — illustrates how to call Flexmonster’s methods.
  • updating-data.vue — shows how to refresh data at runtime using updateData().
  • сustomizing-toolbar.vue — an example of Toolbar customization. 
  • customizing-grid.vue — demonstrates how to highlight a certain measure on the grid using customizeCell().
  • with-highcharts.vue — an example of Flexmonster and Highcharts integration.
  • with-amcharts.vue — a dashboard with Flexmonster and amCharts 5.
  • with-amcharts4.vue — demo of Flexonster's integration with amCharts 4.

Learn more about how these demos work in the Usage examples for Vue 3. Flexmonster usage in Nuxt and Vue 3 is similar.

Integrate Flexmonster into a Nuxt project

Complete the following steps to integrate Flexmonster into a Nuxt project.

Step 1. (optional) Create a Nuxt project

Skip this step if you already have a Nuxt project.

Сreate a Nuxt project by running the following commands in the console:

npx nuxi@latest init flexmonster_project
cd flexmonster_project

Step 2. Get Flexmonster

Flexmonster Vue wrapper must be used for integration with Nuxt. Run the following command to download and install the wrapper:

flexmonster add vue-flexmonster

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

Step 3. Create and register a Nuxt plugin for Flexmonster

To be integrated with Nuxt, Flexmonster must be used as a client-side plugin. To create and register this plugin, do the following:

Step 3.1. Create a plugins/ folder and open it.

Step 3.2. Inside the plugins/ folder, create a flexmonster.client.js file, where you need to import Flexmonster and define it as a Nuxt plugin:

import Pivot from "vue-flexmonster/vue3";
import "flexmonster/flexmonster.css";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component("Pivot", Pivot);
})

The plugin will load Flexmonster when the Vue application is created. If you are planning to also integrate with a 3rd-party charting library, import a Flexmonster connector for this library inside the plugin:

import Pivot from "vue-flexmonster/vue3";
import "flexmonster/flexmonster.css";
import "flexmonster/lib/flexmonster.amcharts";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component("Pivot", Pivot);
})

Step 3.3. Open the nuxt.config.ts file and register the plugin for Flexmonster by adding the following line of code:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
 compatibilityDate: "2024-04-03",
 devtools: { enabled: true },
 plugins: [{ src: "~/plugins/flexmonster.client.js", mode: "client" }]
})

Notice the mode: "client" option. This will ensure that Flexmonster is loaded only on the client side, which is necessary for Flexmonster to work.

Step 4. Embed Flexmonster

Add Flexmonster to your page (e.g., app.vue):

<template>
 <div>
   <NuxtRouteAnnouncer />
   <ClientOnly>
       <Pivot/>
   </ClientOnly>
 </div>
</template>

Note The <Pivot> component must be added inside the <ClientOnly> component, so Flexmonster is rendered only on the client side.

Step 5. Run the application

Run your application from the console:

npm run dev

Open your project in the browser to see the result.

To shut down the project from the console, press Ctrl + C (Control + C on macOS).

Troubleshooting

If you run into any issues during the integration, visit our troubleshooting page. 

Next steps

• Read about the <Pivot> component
• Connect to your data source
• Configure Flexmonster
• Update Flexmonster