Vue3 (Script Setup) implementation of vue-pdf-embed

README.md

Remember to install vue-pdf-embed first;

https://github.com/hrynko/vue-pdf-embed

npm install vue-pdf-embed

yarn add vue-pdf-embed

<script src="https://unpkg.com/vue-pdf-embed"></script>

PDFViewer.vue

<template>

  <div class="row pe-0">
    <div class="col pe-0">
      <vue-pdf-embed
        class="border p-0 rounded-3 overflow-hidden"
        ref="pdfRef"
        :source="source"
        :page="page.current"
        @rendered="handleDocumentRender"
      />
    </div>
  </div>
  
  <div class="row text-center py-3" v-if="page.loaded">
    <div class="col">
      <button
        :disabled="page.current <= 1" @click="page.current--"
        class="btn btn-sm btn-rounded-circle btn-primary">
        <i class="fa-regular fa-chevrons-left"></i>
      </button>

      <span class="text-muted px-3">{{ page.current }} / {{ page.count }}</span>

      <button
        :disabled="page.current >= page.count" @click="page.current++"
        class="btn btn-sm btn-rounded-circle btn-primary">
        <i class="fa-regular fa-chevrons-right"></i>
      </button>
    </div>
  </div>

</template>

<script setup>

import VuePdfEmbed from 'vue-pdf-embed'
import {reactive, ref} from "vue";

let props = defineProps({
  source: String,
});

const pdfRef = ref(null);
let page = reactive([])

page.current = 1;
page.count = 1;
page.loaded = false;

function handleDocumentRender() {
  page.count = pdfRef.value.pageCount
  page.loaded = true;
};

</script>