Reporting for Vue - Integrate a Web Report Designer into a Vue App

This example incorporates the Web Report Designer component into a client-side app built with Vue. The example consists of two parts:

• The ServerSideApp folder contains the backend project. The project is an ASP.NET Core application that enables cross-domain requests (CORS) (Access-Control-Allow-Origin) and implements custom web report storage.

• The vue-report-designer folder contains the client application built with Vue.

Quick Start

Server

In the ServerSideApp folder, run the following command:

dotnet run

The server starts at http://localhost:5000. To debug the server, run the application in Visual Studio.

Client

In the vue-report-designer folder, run the following commands:

npm install
npm run dev

Open your browser and navigate to the URL specified in the command output to see the result. The application displays the Web Report Designer.

Files to Review

• App.vue
• main.js
• ReportingControllers.cs
• CustomReportStorageWebExtension.cs
• Program.cs

Documentation

• Report Designer Integration in Vue

More Examples

• How to use the Web Document Viewer in JavaScript with the Vue JavaScript Framework

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)