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.

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.

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:

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

3. 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.

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

1cd webviewer-vue
2npm install

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:

1npm i @pdftron/webviewer

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. In your terminal, create the public/lib/webviewer directory if it doesn't already exist:

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

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

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

Your project should now include a similar structure:

1webviewer-vue/
2├── .vscode/
3├── node_modules/
4├── public/
5│   ├── lib/
6│   │   └── webviewer/
7│   │       ├── core/
8│   │       ├── ui/
9│   │       └── ...
10│   └── favicon.ico
11├── src/
12└── .gitignore
13└── ...

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:

1npx --yes mkdirp src/components

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

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

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

1<template>
2  <!-- Container element where WebViewer will be mounted -->
3  <div ref="viewer" style="height: 100vh; width: 100%; margin: 0 auto;"></div>
4</template>
5
6<script setup>
7import { ref, onMounted } from 'vue';
8
9/**
10 * Import WebViewer in Vite 8, where package may resolve as:
11 * - a callable function
12 * - an object with a default export
13 */
14import WebViewerImport from '@pdftron/webviewer';
15
16// Normalize the WebViewer import in Vite 8
17const WebViewer =
18  typeof WebViewerImport === 'function'
19    ? WebViewerImport
20    : WebViewerImport.default;
21
22// Define component props
23const props = defineProps({
24  initialDoc: String,
25});
26
27// Reference to DOM element used as the WebViewer mount point
28const viewer = ref(null);
29
30/**
31 * Initialize WebViewer once the component is mounted
32 * and the DOM element is available
33 */
34onMounted(() => {
35  WebViewer(
36    { 
37      // Public path where the WebViewer lib assets are served
38      path: '/lib/webviewer',
39      // Document to load initially (passed in from App.vue)
40      initialDoc: props.initialDoc,
41      // Replace with your Apryse license key
42      licenseKey: 'YOUR_LICENSE_KEY',
43    },
44    viewer.value,
45  );
46});
47</script>

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

1<script setup> 
2import WebViewer from './components/WebViewer.vue' 
3</script> 
4
5<template> 
6  <WebViewer 
7    initialDoc="https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf" 
8  />
9</template> 
10

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:

1npm run dev

A successful output looks similar to:

1> webviewer-vue@0.0.0 dev
2> vite
3
4
5  VITE v8.0.16  ready in 2896 ms
6
7  ➜  Local:   http://localhost:5173/
8  ➜  Network: use --host to expose
9  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
10  ➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
11  ➜  press h + enter to show help

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

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