How to Add a Vue Report Viewer to Your Web Application

What You Will Need
· ActiveReportsJS

· VisualStudio Code

· NPM

· Vue

Controls Referenced
· Getting Started

· Vue Report Viewer

Tutorial Concept
Easily embed a Vue Report Viewer into your Vue 3 application with ActiveReportsJS by setting up your project in VS Code, installing dependencies, and configuring the viewer component using a basic JSON report. This tutorial walks you through every step, from project creation and styling to running the app so that you can render interactive reports directly in your Vue environment.

As businesses continue transitioning from traditional desktop software to modern web and cloud-based solutions, one major benefit has been clear: users can now access critical business data from virtually anywhere, on any device. Tools like ActiveReportsJS make this shift seamless, offering a powerful way to deliver interactive reports to desktops, tablets, and smartphones alike.

ActiveReportsJS is a client-side reporting solution designed with flexibility in mind. It features both a report viewer and a report designer, which can be easily integrated into major web frameworks — including Vue.

In this guide, we’ll walk through how to embed the Vue Report Viewer component into your Vue application. Here’s a breakdown of what we’ll cover:

• Setting Up a Vue Project in VS Code
• Installing ActiveReportsJS via NPM or Yarn
• Adding the Vue Report Viewer Component
• Rendering the Viewer in the Browser
• Creating a Basic ARJS Report
• Running and Testing the Application

Let’s dive in!

Step 1: Set Up Your Vue Project in VS Code

First, we’ll initialize a new Vue 3 project using the Vue CLI. Open your terminal and run the following command:

npm create vue@3

You’ll be prompted to select configuration options. Choose the following for this tutorial:

✔ 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

After completion, you’ll have a clean and functional Vue 3 project ready to go.

Step 2: Install ActiveReportsJS Dependencies

Next, we’ll install the necessary ActiveReportsJS packages. In your project directory, use either of the following:

With NPM:

npm install @mescius/activereportsjs-vue

With Yarn:

yarn add @mescius/activereportsjs-vue

This will bring in everything needed to use ActiveReportsJS components in your Vue project.

Step 3: Import and Register the Viewer Component

Open your App.vue file. Inside the <script> tag, import the Viewer component and register it:

<script lang="ts">
import { Viewer } from "@mescius/activereportsjs-vue";
export default {
  name: "App",
  components: {
    JSViewer: Viewer
  }
}
</script>

Below the script, add the required styles for the viewer:

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

These CSS files provide the core UI styling and specific styles for the report viewer.

Step 4: Render the Viewer in the App

Now that everything is set up, it’s time to display the viewer in the browser.

In the <template> section of your App.vue, add the following markup:

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

This markup does two things:

• It wraps the viewer inside a styled div (#viewer-host)
• It binds a sample report file to the viewer component using the Uri property.

Now, add some basic styling:

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

Lastly, ensure the default styles don’t interfere with the viewer. In your main.ts file, update it to:

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

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

Step 5: Create a Simple ARJS Report File

To test the viewer, we’ll need a sample .rdlx-json report file. Inside the public directory, create a new file named report.rdlx-json and paste the following content:

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

This basic report contains a single text box that displays a welcome message.

Step 6: Run and Preview the Application

With everything in place, it’s time to run the app and see the viewer in action.

If you’re using NPM:

npm run dev

If you’re using Yarn:

yarn run dev

Once the app compiles, open your browser and navigate to the local development server. You should see your Vue Report Viewer rendering the simple report. If so, great job — you’ve successfully embedded ActiveReportsJS into your Vue app!

Conclusion

Integrating the ActiveReportsJS Vue Report Viewer into your application is straightforward and powerful. With just a few steps, you can enable users to view dynamic reports from any device with ease.

For more complex reporting scenarios, such as parameterized reports, custom themes, or interactive dashboards, be sure to explore the official documentation or reach out to the support team.