Skip to main content Skip to footer

How to Add a Vue Report Viewer to Your Web Application

  • 0 Comments
Quick Start Guide
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 move from desktop applications to web and cloud technologies, it has become easier for users to access business-critical information from anywhere, anytime. Thankfully, ActiveReportsJS makes it easy for users to access company reports from their desktop, tablet, or mobile device.

ActiveReportsJS is a client-side reporting solution with highly interactive capabilities. It provides both report viewer and report designer components that can be easily integrated into any of the major web frameworks, including Vue.

In this article, we’ll show you how you can add a Vue Report Viewer component to your Vue application by following the steps below:

Want to Test It Out For Yourself? Download ActiveReportsJS Today!

Setting Up the Vue Application in VS Code

To start working with ActiveReportsJS, we’ll need to set up a Vue application into which we can import the library. To start the project setup, run the following command:

npm create vue@3

This will start to create the project and ask you for some basic instructions on how you want your project to be created. For our case, make the following choices:

✔ 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

When complete, you’ll have a fully functioning Vue application.

Installing ActiveReportsJS Dependencies Using NPM or Yarn

With the application set up, we can install the ActiveReportsJS libraries. You can use either NPM or Yarn to install these packages. For NPM, run the following command in a terminal at your project’s location:

npm install @mescius/activereportsjs-vue

If you’re using Yarn, you can use the following command to install the library:

yarn add @mescius/activereportsjs-vue

Adding the Vue Report Viewer Component to the Application

Now that the ActiveReportsJS packages have been installed, we can start importing the files we’ll need to render the Vue Report Viewer in the browser. Inside of your application’s App.vue file, we’re going to modify the <script> tag that creates the component to both import the required files, as well as register the viewer as a component:

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

export default {
  name: "App",
  components: {
    JSViewer: Viewer
  }
}
</script>

Then, beneath the <script> tag, we’ll import the CSS files that we need 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>

The first of the two files is the core UI CSS file, while the second contains CSS specifically for the viewer component.

Rendering the Viewer Component in Markup

With all of the required files loaded, we can now reference the component in markup and load it into the browser. Inside of the <template> tag, add the following markup:

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

We’re doing two things here. First, we’re creating a div with the id viewer-host, which we can reference in CSS to add some styling. We’re also adding the viewer component that we defined in the previous step and binding a report to it using the report property of the component.

Next, inside of a <style> tag, we’ll add some CSS to style the div created above:

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

This will set a defined height and width that the viewer can expand to fit.

Before we move on to creating a report file, there’s one more thing that we need to do: we need to prevent the default application styles from interfering with the Vue Report Viewer layout. To do so, modify the main.ts file and modify it as follows:

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

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

Creating an ARJS Report File

Since the Vue Report Viewer is using ActiveReportsJS, we’ll need to use an ARJS report template when loading a report. Since ActiveReportsJS uses the .rdlx-json extension for its report files, there are a few different ways we can go about creating/adding a report to our Vue project. We can structure the report using JSON syntax, create a report programmatically using the ARJS API, or design a report in the Standalone Report Designer.

For this tutorial, we’ll structure our report file using JSON within VS Code. In the public folder, add a new file called report.rdlx-json. Inside of this file, past the following JSON:

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

This will create a very basic report containing a textbox with the text “Hello, ActiveReportsJS Viewer”.

Running the Application

We’re now ready to run and test the application with everything set up. If you used NPM to set up your application, run the following command:

npm run dev

And if you’ve used Yarn, you can run it via this command:

yarn run dev

When the application compiles, if everything was set up correctly, you should see the Vue Report Viewer that we created in the browser. In that case, congratulations on successfully adding the ARJS Vue Report Viewer to your application!

ActiveReportsJS Viewer

Conclusion

After reading through the blog, you should feel more comfortable knowing that you can easily add ActiveReportsJS components to your Vue projects. If some of your questions were left unanswered or if you are looking for detailed help with a specific scenario, check out our documentation or open a case with our support team. As always, thank you so much for following along and using ActiveReportsJS!

 

Want to Test It Out For Yourself? Download ActiveReportsJS Today!

Check out our quick tutorial video that covers how to add a Vue Report Viewer to your Web Application in minutes:

Try Our JavaScript Reporting Tool

Joel Parks - Product Manager

Joel Parks

Product Manager