How to Add a Vue Report Viewer to Your Web Application
Quick Start Guide | |
---|---|
What You Will Need |
ActiveReportsJS VisualStudio Code NPM Vue |
Controls Referenced | |
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:
- Setting Up the Vue Application in VS Code
- Installing ActiveReportsJS Dependencies Using NPM or Yarn
- Adding the Vue Report Viewer Component to the Application
- Rendering the Viewer Component in Markup
- Creating an ARJS Report File
- Running the Application
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:
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:
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:
If you’re using Yarn, you can use the following command to install the library:
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:
Then, beneath the <script> tag, we’ll import the CSS files that we need for the viewer:
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:
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:
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:
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:
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:
And if you’ve used Yarn, you can run it via this command:
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!
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: