Get Started with ActiveReportsJS Report Designer in Nuxt.js

Nuxt.js is a Vue-based framework that provides a well-defined structure for your application along with optimizations that make the development process and final application faster. In this tutorial, we build a Nuxt.js application that uses the Report Designer component to load a simple report.

Create a Nuxt.js Application

The easiest way to create a Nuxt.js application is to use the Nuxt CLI(nuxi) tool. Run the following command from the command prompt or terminal to create a Nuxt.js project.

# with npx(included by default with npm v5.2+)
npx nuxi@latest init arjs-nuxtjs-designer-app

# with pnpm
pnpm dlx nuxi@latest init arjs-nuxtjs-designer-app

Install NPM packages

We distribute the Vue Report Designer Component via the @grapecity/activereports-vue NPM package that depends on the @grapecity/activereports package that includes the core functionality.

To install the current version of these packages, run the following command from the application's root folder.

# with npm
npm i @grapecity/activereports-vue@latest 

# with yarn
yarn add @grapecity/activereports-vue@latest

Configuring Nuxt.js

Create a new file called alias.js in the root of the application and add the following code:

import moment from "./node_modules/moment";

export const { fn, min, max, now, utc, unix, months,
  isDate, locale, invalid, duration, isMoment, weekdays,
  parseZone, localeData, isDuration, monthsShort, weekdaysMin,
  defineLocale, updateLocale, locales, weekdaysShort, normalizeUnits,
  relativeTimeRounding, relativeTimeThreshold, calendarFormat, ISO_8601
} = moment;

export default moment;

Open the nuxt.config.ts file located in the root folder of the application and replace its content with the following:

import path from "path";
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ssr: false,
  devtools: { enabled: true },
  vite: {
    resolve: {
      alias: [
        {
          find: /^moment$/,
          replacement: path.resolve(__dirname, "./alias.js"),
        },
        {
          find: /^gc-dv$/,
          replacement: path.resolve(
            __dirname,
            "./node_modules/@grapecity/activereports/lib/node_modules/gc-dv.js"
          ),
        },
        {
          find: /^\@grapecity\/ar-js-pagereport$/,
          replacement: path.resolve(
            __dirname,
            "./node_modules/@grapecity/activereports/lib/node_modules/@grapecity/ar-js-pagereport.js"
          ),
        },
        {
          find: /^barcodejs$/,
          replacement: path.resolve(
            __dirname,
            "./node_modules/@grapecity/activereports/lib/node_modules/barcodejs.js"
          ),
        },
      ],
    },    
  }
})

Add an ActiveReportsJS report into the application

ActiveReportsJS uses the JSON format and the rdlx-json extension for report template files. In the application's public folder, create a new file called report.rdlx-json and insert the following JSON content into it.

{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Designer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}

Add the Vue Report Designer component to the application

Open the app.vue file and replace the default content with the following code. It integrates the Vue Report Designer and loads the report template that you added on the previous step. It also imports the default Report Designer Component Styles and defines the style for the designer's hosting element.

<template>
  <div id="designer-host">
  <ClientOnly>
    <Designer v-bind:report="{id: 'report.rdlx-json', displayName: 'my report' }" />
    </ClientOnly>
  </div>
</template>

<script lang="ts">
import {Designer} from '@grapecity/activereports-vue';

export default{
  name: "DesignerPage",
  components: {
    Designer,
}};
</script>

<style
  src="node_modules/@grapecity/activereports/styles/ar-js-ui.css"
></style>
<style
  src="node_modules/@grapecity/activereports/styles/ar-js-designer.css"
></style>

<style scoped>
#designer-host {
  height: 100vh;
  width: 100%;
}
</style>

Run and test the application

You can run the application by using the yarn dev command. By default, the project runs on http://localhost:3000/. If you browse this URL, the ActiveReportsJS Report Designer will appear on the page. The designer will display the report that shows the Hello, ActiveReportsJS Designer text. You can test the basic functionality by using the Report Designer User Interface.