Build a Vue PDF viewer with Apryse WebViewer SDK

This guide shows how to build a Vue PDF viewer using the Apryse WebViewer SDK. You'll learn how to integrate the SDK into a Vue.js application to render, view, and interact with PDF documents using the WebViewer UI.

You can also download a ready-to-use GitHub sample to get started quickly, or explore the interactive Showcase demo to see WebViewer's full capabilities in action.

Prerequisites

This guide assumes basic familiarity with Vue.js development. Before you start:

• Install Node.js and npm. See the Vue.js documentation for version details.
• Install Visual Studio Code or another code editor to develop and debug your code.
• Get your Apryse trial key.

1. Create a Vue project

In this section, you’ll create a new Vue.js application using npm. This project provides the foundation for integrating Apryse WebViewer. If you already have a Vue app, skip this and continue to Install WebViewer.

1. In your terminal, go to the directory where you want to create the project.
2. Create a new webviewer-vue Vue 3 project using the official Vue tooling and a minimal setup:

Shell

npx --yes create-vue@latest webviewer-vue --bare

Info

Flags are used to skip prompts during project configuration. The setup skips all example code and starts with a blank Vue project. Select different options if preferred.

1. Complete the setup prompts with the following settings. Select different options if preferred:

• Don't use TypeScript.
• Don't select any additional Vue or experimental features.

1. Navigate to your new Vue project directory and install Vue dependencies:

Shell

cd webviewer-vue
npm install

2. Install WebViewer

Next, install the Apryse WebViewer SDK using npm. This command adds the WebViewer package to your project, allowing you to integrate the PDF viewer and editor into your Vue application.

After navigating to your webviewer-vue project directory, run the following command to install WebViewer:

Shell

npm i @pdftron/webviewer

3. Copy WebViewer assets

WebViewer needs access to its static assets at runtime, including WebAssembly modules, HTML, and CSS files. In a Vue project, you must copy these assets into the public directory so they can be served correctly. For more, see Copying WebViewer static assets.

1. From your project root, create the public/lib/webviewer directory if it doesn't already exist:

Shell

npx --yes shx mkdir -p public/lib/webviewer

1. Copy all WebViewer static assets from node_modules/@pdftron/webviewer/public into the new public/lib/webviewer directory:

Shell

npx --yes cpy-cli "node_modules/@pdftron/webviewer/public/**/*" public/lib/webviewer

Your project should now include a similar structure:

webviewer-vue/
├── .vscode/
├── node_modules/
├── public/
│   ├── lib/
│   │   └── webviewer/
│   │       ├── core/
│   │       ├── ui/
│   │       └── ...
│   └── favicon.ico
├── src/
└── .gitignore
└── ...

Info

The path option used when initializing WebViewer must point to this directory (for example, /lib/webviewer). If the path is incorrect, WebViewer will fail to load.

4. Create the PDF viewer

In this section, you'll add WebViewer to your Vue app by creating a component and initializing the viewer. This mounts the WebViewer UI and loads a document in your application.

1. Create a components folder in your project's src directory:

Shell

npx --yes mkdirp src/components

1. Create a WebViewer.vue file in the components folder:

Shell

npx --yes shx touch src/components/WebViewer.vue

1. In Visual Studio Code, add this code to the WebViewer.vue file and save:

<template>
  <!-- Container element where WebViewer will be mounted -->
  <div ref="viewer" style="height: 100vh; width: 100%; margin: 0 auto;"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import WebViewer from '@pdftron/webviewer';

// Define component props
const props = defineProps({
  initialDoc: String,
});

// Reference to DOM element used as the WebViewer mount point
const viewer = ref(null);

/**
 * Initialize WebViewer once the component is mounted
 * and the DOM element is available
 */
onMounted(() => {
  WebViewer(
    { 
      // Public path where the WebViewer lib assets are served
      path: '/lib/webviewer',
      // Document to load initially (passed in from App.vue)
      initialDoc: props.initialDoc,
      // Replace with your Apryse license key
      licenseKey: 'YOUR_LICENSE_KEY',
    },
    viewer.value,
  );
});
</script>

Info

If you're signed in with an Apryse account, your license key is automatically prepopulated in all code snippets.

1. Replace the contents of the src/App.vue file with the following and save:

Vue

src/App.vue

<script setup> 
import WebViewer from './components/WebViewer.vue' 
</script> 

<template> 
  <WebViewer 
    initialDoc="https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf" 
  />
</template> 

Info

If WebViewer doesn't appear in your application, verify that the container element has proper CSS dimensions. WebViewer automatically fills the full width and height of the element it's mounted to.

5. Verify your output

You can now load and display a PDF document in the WebViewer UI. Run your Vue application to launch WebViewer and see the PDF in your browser.

1. From your project directory, run the following command to start the application:

Shell

npm run dev

A successful output looks similar to:

Shell

> webviewer-vue@0.0.0 dev
> vite


  VITE v8.0.16  ready in 2896 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help

1. Open the localhost URL from your terminal to view the WebViewer UI and PDF document.

---

Get started video

In this 4-minute video, learn the fundamentals of Apryse WebViewer, including key concepts for installation and initialization in any web application.

Overview of Apryse WebViewer fundamentals, including installation and initialization.

Next steps

UsageGuidesSamplesAPI docs