View PDF files in the Vue.js application

You can easily integrate GemBox.PdfViewer into Vue.js projects.

First, you need to install GemBox.PdfViewer using NPM or Yarn with one of the following commands:

npm install @gembox/pdfviewer
# or
yarn add @gembox/pdfviewer

After that, you can use GemBox.PdfViewer in your Vue components. The following example is a basic PDF Viewer component:

<template>
  <div ref="viewerElement" class="viewer"></div>
</template>

<script setup>
  import { onMounted, ref } from "vue";
  import { GemBoxPdfViewer } from '@gembox/pdfviewer';
  import '@gembox/pdfviewer/dist/es/pdfviewer.css';
  
  GemBoxPdfViewer.setLicense("FREE-LIMITED-KEY");
  
  const viewerElement = ref(null);
  
  onMounted(() => {
    GemBoxPdfViewer.create({
      container: viewerElement.value
    });
  });
</script>

<style scoped>
  .viewer {
    width: 600px;
    height: 350px;
  }
</style>

You can save this component as PdfViewer.vue and use it throughout your Vue application as needed:

<template>
  <PdfViewer/>
</template>

<script setup>
  import PdfViewer from "/src/components/PdfViewer.vue";
</script>

Next steps

GemBox.PdfViewer is a JavaScript library that enables you to show PDF files seamlessly in your web applications.

Download Buy

View PDF files in the Vue.js application

See also

Next steps