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