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/pdfviewerAfter 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>