Create a Vue Front-End Application with a Document Viewer

• Mar 24, 2025
• 4 minutes to read

The Web Document Viewer is used in applications that contain client and server parts:

ClientA Web Document Viewer integrated in a client Vue application displays a report provided by the server-side model.ServerThe server is an ASP.NET Core application that handles client data requests and provides access to data sources, report storage, and other back-end capabilities.

This tutorial creates and configures a client React application and a server ASP.NET Core backend. The client contains the Web Document Viewer control.

View Example

Prerequisites

• Node.js v18.3 or later
• .NET 8 SDK or later

Note the following details about package versions:

• The script version on the client should match the library version on the server.
• DevExpress npm package versions should be identical.

Server (Back-End) Application

Use the DevExpress CLI Template

You can use DevExpress CLI Templates to create an ASP.NET Core back-end application. Begin with the steps below:

1. Install DevExpress ASP.NET Core project templates from nuget.org:

2. Create a back-end Reporting application for a Document Viewer:

3. Enable cross-origin requests (CORS). Specify the policy that allows any local application to access the report’s back-end. Use the SetIsOriginAllowed method to set it up.

4. To run the server-side application, run the following command:

Use Visual Studio Template

To create a back-end application from a Microsoft or DevExpress Template in Visual Studio, review the following help topics:

• Document Viewer Server-Side Application (ASP.NET Core)
• Document Viewer’s Server-Side Configuration (ASP.NET MVC)

Client (Front-End) Application

1. Create a Vue application with the default preset:

2. Navigate to the project folder and install DevExpress npm packages:

3. Create a src/App.vue file with the following content:

4. Add styles to the src/main.js file:

5. Remove default project styles to avoid conflicts. To do this, remove the ./assets/main.css import in the main.js file.

Run the Project

1. Run the server application.

2. Run the client application:

3. Open your browser and navigate to the URL specified in the command output to see the result.

Troubleshooting

When you start the application, you may encounter the following issues:

Page Is Blank

The Document Viewer page is blank. The following error message is displayed at the bottom of the page:

Could not open report ‘TestReport’

Check the following:

• The backend application is up and running.
• The backend application runs on the port specified in the host setting of the Document Viewer component.
• The application’s URI is compliant with the CORS policy specified in your back-end application.
• The reportUrl setting value matches an existing report. For the backend application, ensure that either the Reports folder contains a reportUrl.repx file or the ReportsFactory.Reports dictionary contains the reportUrl entry (if the back-end application originated from the DevExpress template).
• The version of DevExpress npm packages should match the version of NuGet packages. Enable Development Mode to check for a library version mismatch on every request to the server. For details, review the following help topic: Server-Side Libraries Version.

Refer to the following topic for more information: Troubleshooting.