Getting Started with Vue PDF Viewer

25 Aug 20264 minutes to read

This section explains how to create the PDF Viewer component and configure the PDF Viewer in a Vue 2 application using Vue CLI. The standalone PDF Viewer renders PDFs locally in the browser without requiring a server.

Prerequisites

System requirements for Vue components

Create a Vue Application

Use one of the following commands to 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 the Default ([Vue 2] babel, eslint) option.

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

Install the Syncfusion® Vue PDF Viewer package

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 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 {
      resourceUrl: 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib',
      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 ]
  }
}

serviceUrl – The back-end endpoint for PDF processing. The Syncfusion-hosted URL provides evaluation capabilities. For production, replace with your deployed web service endpoint.

documentPath – The URL or file path to the PDF document to display. You can provide a remote URL, a Base64 string, or a local file path.

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" :resourceUrl="resourceUrl" :documentPath="documentPath">
</ejs-pdfviewer>

To load PDF documents and resources from your local application instead of a CDN, refer to Load PDF Viewer with Local Resources

Run the project

Run the following command to start the Vue application:

npm run serve
yarn serve

After the application starts, open the URL displayed 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.

View sample in GitHub

Video tutorial

To get started quickly with Vue PDF Viewer, you can watch this video:

See also

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