Getting Started with Vue PDF Viewer

1 Sep 20267 minutes to read

Syncfusion® Vue PDF Viewer enables you to view, annotate, and interact with PDF documents in web applications. This section guides you through the steps to get started and create a PDF Viewer in a Vue application.

Prerequisites

Install the Syncfusion CLI

Install the Syncfusion CLI globally using the following command:

npm install -g @syncfusion/syncfusion-cli

Set up the project using Syncfusion CLI

You can create a Vue application using the Syncfusion CLI. The CLI provides two ways to create a project:

Non-interactive mode

Non-interactive mode allows you to create a project directly using a single command with the required command-line arguments.

sf new syncfusion-vue-app --framework vue --template pdf-viewer

In this mode, the project configuration is passed directly in the command. The above command creates a Vue Vite application configured with the Syncfusion® PDF Viewer component.

Interactive mode

Interactive mode guides you through the project creation process with step-by-step prompts.

sf

When you run the sf command, the CLI prompts you to select the required project configuration. To create a Vue Vite application with the Syncfusion® PDF Viewer component, select the following options:

√ Project name? ... syncfusion-vue-app
√ Choose Framework: » Vue
√ Choose Build Tool: » Vite
√ Choose Language: » JavaScript
√ Choose Template: » PDF Viewer
√ Choose Theme: » Tailwind3
√ Choose Style Format: » CSS
√ Would you like to integrate the Syncfusion MCP Server (AI Assistant) into this project? ... no
√ Would you like to install Syncfusion Component Skills for AI-powered development? ... no
√ Install dependencies and start app now? ... no

The above selections generate a Vue Vite application configured with the Syncfusion® PDF Viewer component. You can choose different values for language, theme, style format, MCP setup, and skills installation based on your project requirements.

The Syncfusion® CLI creates the project with a predefined template. After the project is generated, you can customize or replace the component code based on your application requirements.

Run the project

Once the project is created, navigate to the project directory and run the following commands in your terminal.

cd syncfusion-vue-app
npm install
npm run dev

The output will appear as follows:

Output of Vue PDF Viewer Using Syncfusion CLI

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

View Sample in GitHub.

Prerequisites

System requirements for Vue components

Create a Vue application

Use one of the following commands to create a Vue 2 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

The PDF Viewer package is available in the public npm registry and can be installed directly from npmjs.com.

To install the PDF Viewer component, use 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.

Initialize the PDF Viewer

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 ]
  }
}

The documentPath property sets the PDF file path to be loaded. You can provide a remote URL, Base64 string, or local file path (e.g., './public/sample.pdf'). This example uses CDN-hosted resources. For local resources, refer to Load PDF Viewer with Local Resources.

Add the PDF Viewer to the template

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>

Run the project

Run the application using the following command:

npm run serve
yarn serve

After the application starts, open the URL displayed in the terminal (typically http://localhost:8080) in the browser. The Vue PDF Viewer is rendered in the browser with a toolbar and an interactive PDF area, as shown below.

Output of Vue PDF Viewer

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.