Integrate WebViewer PDF Viewer & Editor into a NuxtJS app

This guide will show you how to integrate WebViewer Document Viewer & Editor into a NuxtJS application.

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

Prior to starting, you should have already installed Node and npm.

Get your Apryse trial key.

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

To scaffold our project, we still start by running the following command (replacing <project-name> with your desired project name)

1npm create nuxt <project-name>

You may be asked to install create-nuxt , enter y when prompted.

You will then be asked a set of questions - you can select whichever options you prefer for this step (your selections won't impact the rest of this guide).

After the project has been set up, navigate into your new project by running:

1cd <project-name>

Next, we can install WebViewer by running:

1npm i @pdftron/webviewer

In addition to installing WebViewer, we will need to set up a script to copy the static WebViewer dependencies into statically served folder in your project (in NuxtJS it's the public folder). The reason for this is because WebViewer contains many assets that cannot be bundled by the build system. Instead, these assets need to be served statically.

In package.json we will add a command that copies these static assets to our public folder. You'll also notice that we run this new command before any of the Nuxt tools to ensure the files are always in the proper place when running our app.

1{
2  "scripts": {
3    "build": "npm run copy-webviewer && nuxt build",
4    "dev": "npm run copy-webviewer && nuxt dev",
5    "generate": "npm run copy-webviewer && nuxt generate",
6    "copy-webviewer": "mkdir -p ./public/lib/webviewer && cp -a ./node_modules/@pdftron/webviewer/public/* ./public/lib/webviewer"
7  }
8}

Read more about copying WebViewer static assets.

Now we are ready to implement WebViewer into our app.

Create a file called components/WebViewer.vue (create the components folder if it doesn't exist) and add the following code.

1<template>
2  <div id="webviewer" ref="viewer" />
3</template>
4
5<script>
6export default {
7  name: 'WebViewer',
8  props: {
9    url: String,
10  },
11  mounted () {
12    import('@pdftron/webviewer').then(() => {
13      WebViewer({
14        path: '/lib/webviewer',
15        initialDoc: this.url,
16        licenseKey: 'your_license_key' // sign up to get a free trial key at https://dev.apryse.com
17      }, this.$refs.viewer).then((instance) => {
18        // call apis here
19      });
20    });
21  }
22};
23</script>
24
25<style>
26#webviewer {
27  height: 100vh;
28}
29</style>

This code imports WebViewer and mounts it to a div that we set up in the template section.

Now we can use this component anywhere else in our app. For example, in app.vue we can use this new component like so:

1<template>
2  <div>
3    <WebViewer url="https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf"/>
4  </div>
5</template>
6

Now if we run our dev server with npm run dev, you should see WebViewer mounted with the default file loaded.