npm i vue3-pdfjs or yarn add vue3-pdfjsDemo code can be found under the docs section here.
import { createApp } from 'vue' import App from './App.vue' import VuePdf from 'vue3-pdfjs' const app = createApp(App) app.use(VuePdf) app.mount('#app')Import components from the esm folder to enable tree shaking. Please note that Mozilla's pdfjs npm package does not export tree-shakeable ES modules. Info here - mozilla/pdf.js#12900
<script lang="ts"> import { defineComponent, onMounted, reactive, ref } from 'vue'; import { VuePdf, createLoadingTask } from 'vue3-pdfjs/esm'; import { VuePdfPropsType } from 'vue3-pdfjs/components/vue-pdf/vue-pdf-props'; // Prop type definitions can also be imported import { PDFDocumentProxy } from 'pdfjs-dist/types/src/display/api'; export default defineComponent({ name: 'Home', components: { VuePdf }, setup() { const pdfSrc = ref<VuePdfPropsType['src']>('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf') const numOfPages = ref(0) onMounted(() => { const loadingTask = createLoadingTask(pdfSrc.value) loadingTask.promise.then((pdf: PDFDocumentProxy) => { numOfPages.value = pdf.numPages }) }) return { pdfSrc, numOfPages } } }); </script> <template> <VuePdf v-for="page in numOfPages" :key="page" :src="pdfSrc" :page="page" /> </template>