Get Started with ActiveReportsJS Report Viewer 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 Viewer component to display the output of 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-viewer-app

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

Install NPM packages

We distribute the Vue Report Viewer 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;

Then 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 Viewer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}

Add the Vue Report Viewer component to the application

Open the app.vue file and replace the default content with the following code. It integrates the Vue Report Viewer to display the report template that you added in the previous step. It also imports the default Report Viewer Component Styles and defines the style for the viewer's hosting element.

<template>
  <div id="viewer-host">
      <ClientOnly>
        <Viewer v-bind:report="{ Uri: 'report.rdlx-json' }" />
      </ClientOnly>  
  </div>
</template>

<script lang="ts">
import {PdfExport} from '@grapecity/activereports';
import {Viewer} from '@grapecity/activereports-vue';
const pdf = PdfExport;

export default {
  name: "IndexPage",
  components: {
    Viewer
  },
};
</script>

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

<style scoped>
#viewer-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 Viewer will appear on the page. The viewer will display the report that shows the Hello, ActiveReportsJS Viewer text. You can test the basic functionality by using the Report Viewer User Interface.