Creating reports and dashboards | Stimulsoft community forum

Reporting tool for Vue.js

Embeddable components for creating, viewing, and exporting reports in applications built with the Vue.js framework. Compatible with Vue 3+ and .NET Core 6/8/10. The report generator is built with Vue's architecture in mind, ensuring seamless integration with your project.



Try now

Shop now

Live demo

Installation and Quick Start

Install the required npm packages in just a couple of minutes and add just a few lines of code to integrate the report generator into your Vue.js project. The components are fully ready to use, support Vue 3+, and can be configured through familiar mechanisms — props, events, and slots. Start creating reports right away without spending time on complex setup.

npm install stimulsoft-viewer-vue
dotnet add package Stimulsoft.Reports.Vue

NPM

NuGet

Interactive Report Display

Embed ready-made reports into your Vue.js application using a dedicated viewer component. It fully supports interactivity, updating content when data changes, and is easily controlled through parameters and events. The built-in viewer seamlessly fits into the application interface and provides users with all the necessary tools for working with reports.

<script setup lang="ts">
import { StimulsoftViewer } from 'stimulsoft-viewer-vue';
</script>

<template>
<StimulsoftViewer
request-url="/Viewer/{action}"
action="InitViewer"
height="100vh"
/>
</template>

More examples

Set up view

Report Export & Conversion

Export ready-made reports to the most popular formats: PDF, Excel, Word, HTML, CSV, JSON, XML, and others. The export functionality is available directly from your Vue application through the built‑in component API. Customize export settings, preserve document structure and styling — the result always meets your requirements.

<script setup lang="ts">
import { ref } from 'vue';
import { StimulsoftViewer } from 'stimulsoft-viewer-vue';
import type { StimulsoftViewerHandle } from 'stimulsoft-viewer-vue';

const viewerRef = ref<StimulsoftViewerHandle | null>(null);

const exportToPdf = () => {
if (viewerRef.value)
viewerRef.value.export('Pdf', { ImageResolution: 200 });
};
</script>

<template>
<input type="button" @click="exportToPdf" value="Export to PDF" />
</template>

More examples

Set up export

Server‑Side Report Processing on ASP.NET

The server‑side part of the report generator for Vue.js runs on the ASP.NET platform. All resource‑intensive processes — template loading, rendering, data preparation, and export — are handled on the server. This reduces the load on the client side of Vue applications and speeds up work with reports. The server component is easily integrated via standard APIs and is compatible with .NET 6, 8, 10, and newer, ensuring stability in any project.

Live demo

View on GitHub

using Microsoft.AspNetCore.Mvc;
using Stimulsoft.Report;
using Stimulsoft.Report.Vue;

[Controller]
public class ViewerController : Controller
{

[HttpPost]
public IActionResult InitViewer()
{
var requestParams = StiVueViewer.GetRequestParams(this);

var options = new StiVueViewerOptions();
options.Actions.GetReport = "GetReport";
options.Actions.ViewerEvent = "ViewerEvent";

return StiVueViewer.ViewerDataResult(requestParams, options);
}

[HttpPost]
public IActionResult GetReport()
{
var report = StiReport.CreateNewReport();
var path = StiVueHelper.MapPath(this, "Reports/MasterDetail.mrt");
report.Load(path);

return StiVueViewer.GetReportResult(this, report);
}
}

Designer for Creating Reports, Dashboards, and Forms



The Stimulsoft Designer is the primary tool for visually designing reporting in Vue applications. Connect data from any source – SQL, NoSQL, cloud storage, file systems, and more.

Use over 80 chart types, including 3D visualization, built‑in barcodes, interactive elements, events, and much more. The Designer can run as a standalone desktop application, be embedded into your Vue app, or launch directly in the browser.

Run online

Download for Windows

Stimulsoft Reports.WEB



Stimulsoft Reports for React is a part of the Stimulsoft Reports.WEB product, a cross-platform set of tools for report creation using ASP.NET, ASP.NET MVC, Angular, Blazor, React, and Vue.js technologies. It includes a powerful and rapid report engine using a universal .NET platform, a simple and convenient HTML5 report designer, and an interactive and fast HTML5 report viewer.

Go to purchase

Learn more about Reports.WEB