Getting Started with server-backed Vue PDF Viewer Component in Vue 2

24 Jun 20265 minutes to read

This section explains how to create the PDF Viewer component and configure its functionalities 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.

NOTE

Starting with the 2026 Vol 2 main release (June 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 Syncfusion® CSS styles

Add the required CSS styles for the PDF Viewer component and its dependencies to your App.vue file.

In this example, the Material theme is applied using CSS styles available in the installed packages. The required Material CSS styles are imported into the <style> section of the src/App.vue file.

<style>
  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css';
</style>

NOTE

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 directives in the <script> section of src/App.vue.

import {
  PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
  ThumbnailView, Print, TextSelection, TextSearch, Annotation, FormDesigner, FormFields, PageOrganizer
} 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, PageOrganizer]
  }
}

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>

NOTE

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.

How to Create and Run a Custom PDF Viewer Web Service

Run the project

Run the following command to start the Vue application:

npm run serve
yarn serve

After the application starts, open the localhost URL shown in the terminal 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.

NOTE

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. Consequently, these files are not required for deployment, and you can exclude the copy command for the deployment process.

View sample in GitHub.

NOTE

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

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

NOTE

Looking for the full Vue PDF Viewer component overview, features, pricing, and documentation? Visit the Vue PDF Viewer page.

See also