With over 38K stars on GitHub, Nuxt.js, an open-source framework, offers developers a powerful yet simple web development method due to its productive features, module themes and integrations.

Previously, we explored how to build a Vue PDF viewer with Vue.js. So, today, we’ll show how you can easily add a Nuxt PDF viewer to a Vue.js application using the Nuxt.js framework, to open PDFs in Nuxt and leverage its server-side rendering and file-system routing.

Following the steps in this guide, you will enact not only PDF viewing, but also Office file viewing, within a secure environment that additionally takes care of version control. Since this viewer handles Word, PowerPoint, and Excel natively right in the browser, you won’t require any Office software or MS Office licenses.

Find the source code for this project on our GitHub Repository. You can also visit our get-started documentation for a Nuxt web application , which includes a YouTube video tutorial.

Now, let’s dive in!

Prerequisites

You just need Node.js installed. That's it.

Create Your Nuxt PDF Viewer Project

First, we run a command that will generate our project. The command will end with the name of your Nuxt viewer project.

yarn create nuxt-app myproject

Install Webviewer & Copy Resources

Next, navigate into the folder ‘myproject’ -- or the folder in which you created your Nuxt app. We will run the following command to install WebViewer resources.

npm i @pdftron/webviewer

Open the node_modules folder and navigate into the pdftron/webviewer folder. Now copy both the UI & Core folders into a new folder called ‘webviewer’ within the static folder.

static

Assets inside this folder will be simply copied and not bundled by webpack.

src

This source directory contains assets and components, the building blocks of our application.

package.json

This tells the node package manager (npm) which dependencies need to be downloaded.

Build the WebViewer Component

Next, we add WebViewer as a component. We’ll go through each file and what you need to modify in sequence.

components/tutorial.vue

This file should be discarded since it is the file currently being displayed on the landing page.

components/WebViewer.vue

Create a new component called WebViewer.vue under /components.

<template>
  <div id='webviewer' ref='viewer'></div>
</template>

<script>
export default {
  name: 'WebViewer',
  props: {
    path: String,
    url: String
  },
  mounted: function () {
    import('@pdftron/webviewer').then(() => {

        WebViewer({
            path: '../webviewer',
            initialDoc: this.url, // replace with your own PDF file
          }, this.$refs.viewer).then((instance) => {
            // call apis here
          });
    })
  }
}
</script>

<style>
#webviewer {
  height: 100vh;
}
</style>

When WebViewer is initialized, it returns an instance of WebViewer that can be used to call a number of useful APIs for document creation, manipulation, annotation, collaboration, redaction, and more.

Learn more about WebViewer’s comprehensive functionality by diving into the documentation . In addition, WebViewer is capable of loading files from a URL , blob , file system or base64 data .

Lastly, the style section helps us apply custom CSS like width and height on the viewer’s div element, which WebViewer gets mounted on.

pages/index.vue

Here we can drop in our newly created WebViewer component.

Inside of the template section, add our WebViewer component and pass in the path to WebViewer's ‘webviewer’ folder and URL to the PDF file we want to load.

<template>
  <div id="app">
    <WebViewer :path="`${publicPath}webviewer`" url="https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf"/>
  </div>
</template>

Inside of the script section, let’s import the WebViewer component and declare it in the export statement.

<script>
import WebViewer from '../components/WebViewer.vue'
export default {
  name: 'app',
  components: {
    WebViewer
  },
  data () {
    return {
      publicPath: process.env.BASE_URL
    }
  }
}
</script>

Now, in the style section, you can customize Webviewer.

<style>
html,
body {
  margin: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0 auto;
  height: 100vh;
}
#webviewer{
  height: 100vh;
}
</style>

Finally, back in our terminal, we can run ‘yarn run dev’ to run the Nuxt app.

And to view the running application, navigate to http://localhost:3000!

Wrap Up

That’s it! You should have a Nuxt PDF viewer up and running inside of your Nuxt.js application that will also let you load up and interact on all your Word, Excel, and PowerPoint files.

Download the complete working Nuxt PDF viewer sample here on GitHub.

Then, to get started with PDFTron WebViewer, download a free trial . You can also visit the documentation. There, you’ll find details on WebViewer’s many supported features and more on how to customize the WebViewer UI to your desired look and feel.

If you have any questions about integrating PDFTron into your project -- contact us or reach out to me personally via email. We’ll be more than happy to help!