Steps I performed which solved my problem.
Install pdfjs-dist.
npm install pdfjs-distSecond step this is something you have to do, if you get below error,
op-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
- It has to do with
vite.config.jsfile. - I found solution for that from this post.
Add below code in your
vite.config.jsfile.
build: {
target: "es2022"
},
esbuild: {
target: "es2022"
},
optimizeDeps:{
esbuildOptions: {
target: "es2022",
}
}
- Then you need to import file like this,
import * as pdfjsLib from "pdfjs-dist";
import * as pdfWorker from "pdfjs-dist/build/pdf.worker.mjs";
if you will not import second then you might get below error.
Answer from Nixit Ahir on Stack OverflowpdfWorker is not defined
GitHub
github.com › TaTo30 › vue-pdf
GitHub - TaTo30/vue-pdf: PDF component for Vue 3
VuePDF is a client-side component for Vue 3 that allows you to flexibly render PDF pages within your project. This library wraps pdf.js library so all main features of pdf.js are supported by VuePDF as well.
Starred by 642 users
Forked by 103 users
Languages TypeScript 60.7% | Vue 38.6%
npm
npmjs.com › package › @vue-pdf-viewer › viewer
vue-pdf-viewer/viewer
Save you weeks of development time. ... Save Weeks of Development Time: Vue PDF Viewer simplifies PDF integration with ready-to-use tools, minimizing the need for custom development and saving you valuable time. Tailored for Vue.js ...
» npm install @vue-pdf-viewer/viewer
Videos
05:37
How to Build a PDF Viewer and Editor in Vue.js with WebViewer - ...
05:49
Build a Vue.js 3 PDF Viewer to Load & Embed Local PDF Files With ...
07:06
How to Build a Vue PDF Viewer - YouTube
11:56
Build a Vue.js HTML2PDF.js Example to Create PDF From Template ...
How To View PDF In Vue JS Tutorial (Easy Method)
03:05
How to Generate a PDF from HTML using Vue - YouTube
Nutrient
nutrient.io › blog › sdk › how to generate a pdf with vuejs
Vue PDF generation: Convert HTML to PDF with html2pdf.js in Vue.js
June 19, 2025 - Update your App.vue file to include the content you want to convert and a button to trigger PDF generation. For this example, you’ll convert a simple image: ... This template includes a centered image and a button that will trigger the PDF ...
Vue PDF Viewer
blog.vue-pdf-viewer.dev › building-a-pdf-viewer-for-vuejs-with-pdfjs-vue3-pdf-app-and-more
Building a PDF Viewer for Vue.js with PDF.js, vue3-pdf-app and more
May 24, 2025 - Here's how you can get started with vue3-pdf-app in Vue.js: Install the vue3-pdf-app package using npm or yarn ... Please find the demo here. Let's explore the advantages and disadvantages of using vue-pdf: ... When to use Actually, I don't ...
GitHub
github.com › stellR42 › vue3-pdf-app
GitHub - stellR42/vue3-pdf-app: Vue 3 PDF viewer based on Mozilla's PDFJS
Vue 3 PDF viewer based on Mozilla's PDFJS. Contribute to stellR42/vue3-pdf-app development by creating an account on GitHub.
Starred by 105 users
Forked by 36 users
Languages JavaScript 95.0% | SCSS 1.4% | Vue 1.4% | CSS 1.2%
npm
npmjs.com › package › pdf-vue3
pdf-vue3 - npm
<script setup> import PDF from "pdf-vue3"; </script> <template> <PDF src="/demo.pdf" /> <!-- <PDF :src="BASE64" /> --> <!-- <PDF :src="Uint8Array" /> --> </template>
» npm install pdf-vue3
GitHub
github.com › arkokoley › pdfvuer
GitHub - arkokoley/pdfvuer: A PDF viewer for Vue using Mozilla's PDF.js that supports both Vue2 and Vue3
A PDF viewer for Vue using Mozilla's PDF.js that supports both Vue2 and Vue3 - arkokoley/pdfvuer
Starred by 948 users
Forked by 132 users
Languages Vue 68.2% | JavaScript 31.8%
npm
npmjs.com › package › vue3-pdfjs
vue3-pdfjs - npm
<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>
» npm install vue3-pdfjs
Published Oct 09, 2021
Version 0.1.6
Author Randolph Tellis
Repository https://github.com/randolphtellis/vue3-pdfjs
npm
npmjs.com › package › vue3-pdf-app
vue3-pdf-app - npm
Vue 3 PDF viewer based on Mozilla's PDFJS.
» npm install vue3-pdf-app
Published Jan 03, 2023
Version 1.0.3
Author stellR42
Repository https://github.com/stellR42/vue3-pdf-app
GitHub
github.com › randolphtellis › vue3-pdfjs
GitHub - randolphtellis/vue3-pdfjs: PDF Reader for Vue 3 using Mozilla's PDF.js
<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>
Starred by 106 users
Forked by 22 users
Languages Vue 40.6% | JavaScript 38.5% | TypeScript 19.3% | Shell 1.6%
Made with Vue.js
madewithvuejs.com › vuepdf
VuePDF - PDF Viewer Component - Made with Vue.js
September 25, 2023 - "VuePDF is a Vue 3 client-side component for pdf.js that allows you to flexibly display PDF pages within your project.
DEV Community
dev.to › vue-pdf-viewer › building-a-pdf-viewer-for-vuejs-with-pdfjs-vue3-pdf-app-and-more-21ii
✨Building a PDF Viewer for Vue.js with PDF.js, vue3-pdf-app and more 🚀 - DEV Community
December 4, 2024 - Here's how you can get started with vue3-pdf-app in Vue.js: Install the vue3-pdf-app package using npm or yarn ... Please find the demo here. Let's explore the advantages and disadvantages of using vue-pdf: ... When to use Actually, I don't ...
Top answer 1 of 2
4
I found out the issue was scoped CSS. Since the element renders later, the scoped CSS wasn't getting applied. Below is the imported css that needs to be in an unscoped style tag.
@import '../../node_modules/pdfjs-dist/web/pdf_viewer.css';
2 of 2
3
- Install the pdfjs-dist library:
npm i pdfjs-dist
Locate the
pdf.worker.min.mjsfile in thenode_modules/pdfjs-dist/builddirectory and copy it to thepublicdirectory.Import it in your component:
import * as pdfjsLib from "pdfjs-dist";
import pdfWorker from "/pdf.worker.min.mjs?url";
pdfjsLib.GlobalWorkerOptions.workerSrc = pdfWorker;
npm
npmjs.com › package › vue3-pdf
vue3-pdf - npm
<template> <button @click="$refs.myPdfComponent.print(100, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14])">print</button> <pdf ref="myPdfComponent" src="https://cdn.mozilla.net/pdfjs/tracemonkey.pdf"></pdf> </template> <template> <div> <button @click="logContent" > log content </button> <pdf ref="myPdfComponent" src="https://cdn.mozilla.net/pdfjs/tracemonkey.pdf" ></pdf> </div> </template> <script> import pdf from 'vue-pdf' export default { components: { pdf }, methods: { logContent() { this.$refs.myPdfComponent.pdf.forEachPage(function(page) { return page.getTextContent() .then(function(content) { var text = content.items.map(item => item.str); console.log(text); }) }); } } } </script>
» npm install vue3-pdf
Published Dec 02, 2020
Version 4.2.6
Reddit
reddit.com › r/vuejs › creating visually rich pdfs with pdf-frame-vue [vue 3]
r/vuejs on Reddit: Creating visually rich PDFs with PDF-Frame-Vue [Vue 3]
January 26, 2024 -
Hello Vuejs community! I'm excited to share my open-source project, 'PDF-Frame-Vue', designed specifically for Vue applications. It's a framework that allows you to create interactive and visually rich PDFs and Canvas graphics with its intuitive HTML template syntax.
I would love to get your feedback and support on this. It's crafted to enhance the capabilities of Vue apps. Looking forward to hearing your thoughts and suggestions! Attaching a blog along with the examples for your reference.
Blog: ://nswamy14.hashnode.dev/creating-visually-rich-pdfs-with-pdf-frame-vue
Github Repo: https://github.com/I2Djs/pdf-frame
Pdf Example: https://stackblitz.com/edit/pdf-frame-vuejs
Canvas Example: https://stackblitz.com/edit/pdf-frame-vuejs-canvas-qp1rhy
Vue 3 component for PDF and Canvas graphicsPSPDFKit
pspdfkit.com › blog › 2021 › how-to-build-a-vuejs-pdf-viewer-with-pdfjs
How to Build a Vue.js PDF Viewer with PDF.js
November 4, 2024 - In this blog post, we’ll use the pdfvuer library because it supports both version 2 and version 3 of Vue.js.
npm
npmjs.com › package › vue-pdf-embed
vue-pdf-embed - npm
<script setup> import VuePdfEmbed from 'vue-pdf-embed' // optional styles import 'vue-pdf-embed/dist/styles/annotationLayer.css' import 'vue-pdf-embed/dist/styles/textLayer.css' // either URL, Base64, binary, or document proxy const pdfSource = '<PDF_URL>' </script> <template> <VuePdfEmbed annotation-layer text-layer :source="pdfSource" /> </template>
» npm install vue-pdf-embed
Published Jul 14, 2025
Version 2.1.3
Author Aliaksei Hrynko
Repository https://github.com/hrynko/vue-pdf-embed
Rossta
rossta.net › blog › building-a-pdf-viewer-with-vue-part-1.html
Rendering PDF pages with PDF.js and Vue - rossta.net
June 28, 2018 - This tutorial demonstrates how to create Vue.js components that can render PDFs along with tools like webpack, PDF.js, and the canvas element.