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.

Once you generate your license key, it will automatically be included in your sample code below.

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

Vue

WebViewer.vue

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

<script>
export default {
  name: 'WebViewer',
  props: {
    url: String
  },
  mounted () {
    const WebViewer = globalThis.WebViewer;

    if (!WebViewer) {
      console.error('WebViewer script not loaded');
      return;
    }

    WebViewer.Iframe({
      path: '/lib/webviewer',
      initialDoc: this.url,
      licenseKey: 'your_license_key'
    }, this.$refs.viewer).then((instance) => {
      // call apis here
    });
  }
};
</script>

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