Get started with Apryse WebViewer SDK in a Nuxt Project

The Apryse WebViewer SDK delivers high-quality rendering, conversion, and document manipulation capabilities through a single, customizable component. Supporting PDF, Office, CAD, and images, it's fully featured out of the box, delivering great usability and functionality.

Adding WebViewer to your application allows users to view and edit PDFs without going outside of your application. This reduces reliance on third-party systems, multiple vendors, and file downloads for everyday tasks without compromising control, compliance, or security.

Interact with our showcase demo to test out all of the Apryse WebViewer SDK functionality.

This guide walks you through how to integrate the WebViewer SDK into your Nuxt application. By the end, you'll be able to render a PDF document in the UI.

You can also download a ready-to-go sample on GitHub.

Prior to starting, you should:

• Install Node and npm to use as your run-time environment and package manager.
• Open a text editor like Visual Studio Code.
• Get your Apryse trial key.

This video teaches you the fundamentals of installing and initializing the Apryse WebViewer SDK in any web application. If you wish, you may skip this section and proceed to the steps below.

Scaffold your Nuxt project.

1. On the command line, cd to where you want your new project to sit.

2. Run the following on the command line to generate a project, replacing <project-name> with the name of your project:

1npm create nuxt <project-name>

3. You may be asked if you want to install the create-nuxt package. In this case, select yes.

4. Next, complete the following tasks from the command line during project creation:

a. Choose npm as your package manager.

b. Choose no for access to collect anonymous data about usage.

c. Choose yes to initialize git repository.

d. Choose no to not install any of the official modules.

You could, of course, select whatever configurations you like for your project. The selections above are what was used in writing this guide.

Enter the following on the command line to navigate into your new project, replacing <project-name> with the name of your project:

1cd <project-name>

From your project directory on the command line, install WebViewer into your project:

1npm i @pdftron/webviewer

You have to copy the static assets required for WebViewer to run. The files must be moved into a location that will be served and publicly accessible.

1. Via your text editor, create a subfolder within the existing public folder in your project and name it lib/webviewer.

2. Next, copy specific static assets required for WebViewer. The static folders and file to copy are located in node_modules/@pdftron/webviewer/public in your project and are as follows:

• core
• ui
• webviewer.mn.js

3. Paste the select folders you copied to the new lib/webviewer public location that will be served.

Alternatively, you can read more about copying WebViewer static assets to automate the process.

Now that you've installed WebViewer, you'll implement it into your app.

1. Create a new components folder.
2. Create a new file named WebViewer.vue within the components folder.
3. Add the following code to the WebViewer.vue file, noting that:
   1. path is the path to the copied static assets.
   2. An initial PDF document is specified to open when WebViewer starts using the initialDoc parameter.
   3. Add your own license key in place of 'YOUR_LICENSE_KEY'. If you've created your license key and you're logged in, your key is already in the code below.

1<template>
2  <div id="webviewer" ref="viewer"></div>
3</template>
4
5<script>
6import { ref, onMounted } from 'vue';
7import WebViewer from '@pdftron/webviewer';
8
9export default {
10  name: 'WebViewer',
11  props: { initialDoc: { type: String } },
12  setup(props) {
13    const viewer = ref(null);
14    onMounted(() => {
15      WebViewer({ 
16        path: '/lib/webviewer', 
17        initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf', 
18        licenseKey: 'YOURLICENSE_KEY'
19      }, viewer.value).then(
20        (instance) => {
21          
22        }
23      );
24    });
25    return {
26      viewer,
27    };
28  },
29};
30</script>
31
32<style>
33#webviewer {
34  height: 100vh;
35}
36</style>

This code imports WebViewer and mounts it to a div.

4. Add the following code to the app/app.vue file to import the component and use it elsewhere in your app:

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

After you've saved all of the files, you'll serve the webpage so you can see the WebViewer UI and the PDF you included to open in WebViewer.

1. Run the following command on the command line from your project directory to run the project:

1npm run dev

2. Click the localhost link created in your terminal to view the WebViewer UI and PDF file locally.