Build a Nuxt PDF viewer with Apryse WebViewer SDK

This guide shows how to build a Nuxt PDF viewer using the Apryse WebViewer SDK. You'll learn how to integrate the SDK into a Nuxt 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 Nuxt development. Before you start:

• Install Node.js and npm. See the Nuxt 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 Nuxt application using npm. This project provides the foundation for integrating Apryse WebViewer. If you already have an existing Nuxt app, you can skip this step and continue to the Install WebViewer section.

1. In your terminal, go to the directory where you want to create the project.
2. Create a new webviewer-nuxt project using a minimal setup:

1npm create nuxt@latest webviewer-nuxt -y -- --template minimal --packageManager npm --gitInit
2

3. If prompted to install modules, select No.

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

1cd webviewer-nuxt
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 Nuxt application.

After navigating to your webviewer-nuxt 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 Nuxt 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-nuxt/
2├── .nuxt/
3├── app/
4├── node_modules/
5├── public/
6│   └── lib/
7│       └── webviewer/
8│           ├── core/
9│           └── ui/
10└── favicon.ico
11└── ...

In this section, you'll add WebViewer to your Nuxt 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 root:

1npx --yes mkdirp components

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

1npx --yes shx touch 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 id="webviewer" ref="viewer"></div>
4</template>
5
6<script>
7// Import APIs and libraries
8import { ref, onMounted } from 'vue';
9import WebViewer from '@pdftron/webviewer';
10
11export default {
12  // Component name for debugging and dev tools
13  name: 'WebViewer',
14  // Props accepted by the component
15  props: {
16    initialDoc: { type: String },
17  },
18
19  setup(props) {
20    // Reference to the DOM element that hosts the viewer
21    const viewer = ref(null);
22
23    // Lifecycle hook that runs after the component is mounted to the DOM
24    onMounted(() => {
25      // Initialize the WebViewer inside the referenced DOM element
26      WebViewer(
27        {
28          // Path to the WebViewer library assets
29          path: '/lib/webviewer',
30          // Initial document to load into the viewer
31          initialDoc: props.initialDoc,
32          // License key for Apryse WebViewer
33          // Replace with your Apryse license key
34          licenseKey: 'YOUR_LICENSE_KEY',
35        },
36        // DOM element where WebViewer is rendered
37        viewer.value,
38        ).then((instance) => {
39          // The WebViewer instance is available here
40          // This is where you can customize the UI, register events, etc.
41        });
42    });
43
44    // Expose refs to the template
45    return {
46        viewer,
47    };
48  },
49};
50</script>
51
52<style>
53/* Size the WebViewer container */
54#webviewer {
55  height: 100vh;
56  width: 100%;
57  margin: 0 auto;
58}
59</style>

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

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

You can now load and display a PDF document in the WebViewer UI. Run your Nuxt 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> dev
2> nuxt dev
3
4●  Nuxt 4.4.7 (with Nitro 2.13.4, Vite 7.3.5 and Vue 3.5.35)
5
6  ➜ Local:    http://localhost:3000/
7  ➜ Network:  use --host to expose
8
9  ➜ DevTools: press Shift + Option + D in the browser (v3.2.4)
10
11✔ Vite client built in 32ms
12✔ Vite server built in 9ms

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

In this 5-minute video, learn how to install and integrate the Apryse WebViewer SDK into a Nuxt project. You’ll set up the PDF viewer, verify it’s working in the UI, and then enable the Apryse Spreadsheet Editor.