Integrate WebViewer into Nuxt 2

This sample integrates WebViewer into a Nuxt 2 project. The project was created using the npm init nuxt-app command and utilizes the BootstrapVue UI Framework along with the NuxtJS module, which offers a promise-based HTTP client.

WebViewer provides a slick out-of-the-box responsive UI that enables you to view, annotate and manipulate PDFs and other document types inside any web project.

Click the button below to view the full project in GitHub.

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.Iframe({
14        path: '/lib/webviewer',
15        initialDoc: this.url, // replace with your own PDF file
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>
30

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales

Product:

Integrate WebViewer into Nuxt 2