Using ActiveReportsJS Report Designer Component in Vue applications

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

Add Vue Report Designer 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 Designer to load the report template that you added on the previous step. It also imports the default Report Designer Component Styles and defines style for the designer's hosting element.

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

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

export default {
  name: "App",
  components: {
    JSDesigner: 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>
#designer-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/.

The ActiveReportsJS Designer component will appear on the start page of the application and display the report design. Test the basic functionality by adding report items, setting their properties, creating the data source, et cetera. Visit the Developer Guide and the Online Demo for more information on how to use the Report Designer component.