Get Started with ActiveReportsJS Report Viewer Vue Component

Create a Vue Application

The easiest and recommended way for creating a new Vue application is to use the create-vue tool. Run the following command from the terminal or command prompt:

npm create vue@3

It will ask for several questions regarding features such as TypeScript and testing support and below you can find the recommended answers.

✔ Project name: … arjs-vue-viewer-app
✔ Add TypeScript? … Yes
✔ Add JSX Support? … Yes
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit testing? … No
✔ Add Cypress for both Unit and End-to-End testing? … No
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … No

Scaffolding project in .arjs-vue-viewer-app...
Done.

Install ActivereportsJS npm packages

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

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

npm install @grapecity/activereports-vue@latest

Or if you are using yarn:

yarn add @grapecity/activereports-vue@latest

Configuring Vite.js

The created project uses Vite.js under the hood to run applications in development mode and build them for production. To get ActiveReportsJS working with Vite.js, we need to adjust the Vite.js configuration. 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 replace the content of the vite.config.js file in the root folder of the application with the following:

import { fileURLToPath, URL } from "node:url";
import path from "node:path";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: [
      {
        find: "@",
        replacement: fileURLToPath(new URL("./src", import.meta.url)),
      },
      {
        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 ActiveReportsJS report to the application

ActiveReportsJS uses JSON format and rdlx-json extension for report template files.

In the public folder, create the new file called report.rdlx-json and insert the following JSON content into that file.

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

Add Vue Report Viewer component to the application

Open the src\App.vue file and replace the default content with the following code. This single file component uses the Vue Report Viewer to display the report template that you added on 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">
    <JSViewer v-bind:report="{ Uri: 'report.rdlx-json' }"></JSViewer>
  </div>
</template>

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

export default {
  name: "App",
  components: {
    JSViewer: 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>
#viewer-host {
  width: 100%;
  height: 100vh;
}
</style>

Removing default app style

To prevent the default application style to interfere with the Report Viewer layout, open the src\main.ts folder and replace its content with the following

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Run and test the application

You can run the application by using the yarn run dev or npm run dev commands. By default, the project runs at http://localhost:5173/.

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. The Report Viewer component exposes a rich API supplied with TypeScript declarations, so you can easily use it within a Vue application.