ActiveReportsJS, Nuxt Reporting Component

For developing front-end reporting solutions

The choice of Nuxt developers worldwide

Create and deploy reports quickly and easily in your Nuxt applications using ActiveReportsJS, a Nuxt-based business reporting component.

Why ActiveReportsJS

Why Choose ActiveReportsJS for Your Nuxt App?

Powerful data binding

ActiveReportsJS supports REST API, OData, and GraphQL bindings, allowing you to quickly and easily connect to JSON-formatted data.

Supports Vue, Nuxt, and Vite

ActiveReportsJS supports Vue 3, Nuxt v3, and Vite v2 and higher. Develop web reports more efficiently using popular JavaScript frameworks.

No server dependency

You can integrate the ActiveReportsJS reporting engine into your frontend applications using NPM packages, CDN hosting, or app-hosted JavaScript code with no server-side dependencies.

Client-side export and printing

Quickly generate WYSIWYG reports on the client side and export them to PDF, HTML, and CSV formats. This allows end users to print complete JavaScript reports.

Support for various report types

You can create reports in a format that suits your needs, such as continuous page layout, fixed page layout, etc.

Interactive JS report design

Drilldown, drillthrough, interactive sorting, and bookmarking features allow you to interact and provide more specific information to your end users.

Quick Start

Getting Started with ActiveReportsJS in Nuxt 3 🚀

Creating reports using the ActiveReportsJS designer

1. After downloading the ActiveReportsJS file, install and run the designer program.

* The designer program installation file is located in the designer folder of the downloaded file.

2. Create the report you want using the designer.

After adding the data source and designing the report, save the generated report as "report.rdlx-json" (you can change the file name to whatever you like).


Place the saved report in the public folder of your Nuxt app.

Adding the ActiveReportsJS Viewer to Your Nuxt Application

1. Go to the Nuxt app folder and install the ActiveReportsJS library.

npm install @mescius/activereportsjs-vue

2. ActiveReportsJS does not support server-side rendering (SSR), so configure the component to render only on the client side.

Write the code below in the nuxt.config.ts file.

export default defineNuxtConfig({

ssr: false,

    devtools: { enabled: true },

})

2. Add a css file to apply ActiveReportsJS styles.

Open the Nuxt app app.vue file you want to work on and add the ActiveReportsJS CSS file at the bottom.

Please check the sample below for the exact location of the code.

3. Initialize the report viewer component and load the report created with the ActiveReportsJS designer.

1) Import the Viewer component in the script area of the app.vue file and register the Viewer component.

2) Add a host element to the template area and load the report.rdlx-json file created above.


Please check the full code in the sample below.

4. Run the Nuxt app and check the results.

By default, your project runs at http://localhost:3000/. If you're using Code Sandbox, check Previews 3000 in the List tab.

npm run dev

Learn more about CodeSandbox

For Nuxt developers

Recommended Tutorial for Beginners to ActiveReportsJS

View more articles

ActiveReportsJS Starter Template

Jump-start your development with customizable samples and templates.

Here are a variety of templates and samples utilizing ActiveReportsJS. You can view actual demos, download them, and customize them for your own use.

  • Inventory Investigation Report

    This is a sample inventory report, a document used to determine the current inventory status of products or materials held by a company. It records information on inventory status by item. Download the .rdlx-json file.

    View Demo
    See more details

  • Transaction statement

    This is a sample transaction statement, a document that records transaction details between suppliers and business partners, including the items transacted, quantity, and unit price. Download the .rdlx-json file.

    View Demo
    See more details

  • High-speed ferry mobile e-ticket

    This is a sample high-speed vessel mobile e-ticket, designed to allow customers who purchased tickets using mobile e-tickets and conveniently check high-speed vessel-related information on their mobile devices. Download the .rdlx-json file.

    View Demo
    See more details

  • High-speed ship e-ticket

    This is a sample high-speed vessel e-ticket (e-ticket) containing customer information and high-speed vessel-related details for purchasing a ticket using an e-ticket for high-speed vessels. Download the .rdlx-json file.

    View Demo
    See more details

  • Water quality test report

    This sample water quality test report serves as a document confirming that the water provided is safe and meets regulatory standards, providing consumers with confidence and demonstrating the sanitary management status of public facilities. Download the .rdlx-json file.

    View Demo
    See more details

  • Cosmetics Test Report

    This is a sample cosmetics test report that verifies the safety and reliability of ingredients in cosmetics. Download the .rdlx-json file.

    View Demo
    See more details

  • Electronic Ticket Issuance Confirmation

    This is a sample e-ticket issuance confirmation document issued to passengers who have purchased a ticket, containing boarding information and instructions. Download the .rdlx-json file.

    View Demo
    See more details

  • Graduation certificate

    This is a sample graduation certificate used to officially prove graduation. Download the .rdlx-json file.

    View Demo
    See more details

  • tax invoice

    This is a sample tax invoice required to prove a transaction and calculate value-added tax. Download the .rdlx-json file.

    View Demo

  • estimate

    Here's a sample quotation, including pricing information, terms and conditions, supplier and purchaser information, and more. Download the .rdlx-json file.

    View Demo

  • transcript

    This is a sample transcript that officially certifies a student's academic performance. Download the .rdlx-json file.

    View Demo

  • Customer list

    This sample was created to display customer information using a fixed page layout. Download the .rdlx-json file.

    View Demo
Want more templates & samples?

Visit our ActiveReportsJS online tutorial showcase!