Getting Started with Server-Backed Vue PDF Viewer

25 Aug 20265 minutes to read

This section explains how to create the PDF Viewer component and configure the PDF Viewer’s functionality in a Vue 2 application using Vue CLI with a server-backed architecture. In this mode, PDF rendering and processing are handled by a web service.

Starting with the 2026 Vol 2 main release (July 6, 2026), no new features will be added to the Server PDF Viewer, as almost all of the PDF Viewer functionalities are now available in the Standalone PDF Viewer. If you are currently using the server-backed PDF Viewer, please refer to the migration documentation to transition to the Standalone PDF Viewer.

Prerequisites

System requirements for Vue components

Create a Vue Application

Create a Vue application using Vue CLI.

npm install -g @vue/cli
vue create quickstart
cd quickstart
yarn global add @vue/cli
vue create quickstart
cd quickstart

When prompted, select Default ([Vue 2] babel, eslint).

For Vue 3 application setup, see Create a Vue 3 app.

Install the Syncfusion® Vue PDF Viewer packages

Install the Vue PDF Viewer package from npm using the following command:

npm install @syncfusion/ej2-vue-pdfviewer --save
yarn add @syncfusion/ej2-vue-pdfviewer

Import the required CSS styles

Themes for PDF Viewer can be applied using CSS or SASS files from the npm theme packages, CDN, CRG, or Theme Studio. For more information, see the themes documentation.

This guide uses the Tailwind 3 theme as an example, sourced from the theme package. In this package, each component includes an index.css file that automatically loads all the required dependency styles. To install the Tailwind 3 theme package, use the following command:

npm install @syncfusion/ej2-tailwind3-theme

The required PDF Viewer theme styles are imported into the <style> section of the src/App.vue file:

<style>
  @import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css';
</style>

The index.css file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Dropdowns, Inputs, Navigations, Popups, SplitButtons, and Lists separately.

Refer to the Themes topic to learn more about built-in themes and different ways to refer to themes in a Vue project.

Add the Syncfusion® Vue PDF Viewer component

Add the PDF Viewer component to your Vue application by following these instructions:

Import and register the PDF Viewer

Import and register the PDF Viewer component and its modules in the <script> section of src/App.vue.

import {
  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
  ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  name: "App",
  components: {
    "ejs-pdfviewer": PdfViewerComponent
  },
  data() {
    return {
      serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    };
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
      Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields]
  }
}

Initialize the PDF Viewer

Add the Syncfusion Vue PDF Viewer component to the <template> section in the src/App.vue file.

<ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath">
</ejs-pdfviewer>

The Web API hosted link https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer utilized in the PDF Viewer’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, host your own web service with your required server configurations. Refer to the GitHub Web Service example or Docker image for hosting your own web service and use it for the serviceUrl property. We strongly recommend using the standalone mode.

For step-by-step instructions to host your own web service, see How to Create and Run a Custom PDF Viewer Web Service. If you encounter issues (such as CORS errors or the service not listening), see the Troubleshooting guide.

Run the project

Run the following command to start the Vue application:

npm run serve
yarn serve

After the application starts, open the URL shown in the terminal (typically http://localhost:8080) to view the Vue PDF Viewer in the browser. The output will appear as follows:

Vue PDF Viewer control

You can also explore the PDF Viewer interactively using the live sample below.

When configuring the server-backed PDF Viewer, there is no need to include the pdfium.js and pdfium.wasm files. Unlike the standalone PDF Viewer, which relies on these files for local rendering, the server-backed PDF Viewer fetches and renders PDFs directly from the server, so you can omit these files from your build/deploy process.

View sample in GitHub.

Hosting the web service

For hosting the web service on Linux, ensure you include the SkiaSharp.NativeAssets.Linux 3.119.1 package. Additionally, for AWS environments, use the following packages:

Amazon Web Services (AWS) NuGet package name
AWS Lambda SkiaSharp.NativeAssets.Linux 3.119.1
AWS Elastic Beanstalk SkiaSharp.NativeAssets.Linux.NoDependencies 3.119.1

See also