✨ Building a PDF Viewer in Nuxt with PDF.js, vue-pdf-embed, vue-pdf and Vue PDF Viewer 🚀

It has been a year since my previous article on ✨Building a PDF Viewer for Vue.js with PDF.js, vue3-pdf-app and more 🚀, where I walked through methods like iFrame, opening PDFs in a new tab, using PDF.js or vue3-pdf-app.

Since Nuxt framework is used extensively in the Vue community, I thought it would be interesting to look into how you can build a PDF viewer in Nuxt.

In this article, I will be sharing with you four ways to render PDFs in Nuxt using: PDF.js, vue-pdf-embed, @tato30/vue-pdf, and Vue PDF Viewer. I will also break down the pros and cons of each so you can pick what fits your project best.

---

How is Nuxt different from Vue.js?

Vue.js is great for building interactive interfaces, but when your app grows, you often end up stitching together routing, server-side rendering (SSR), and deployment setup on your own.

That’s where Nuxt steps in. It’s a framework built on top of Vue.js that adds SSR, static site generation, automatic routing, and performance optimizations out of the box, so you can focus on building your site's features.

Both Vue and Nuxt uses the same core ideas, but Nuxt gives you more structure for large projects. If you want to scale your site or improve SEO, Nuxt saves time and reduces setup headaches.

---

Vue PDF Viewer: Flexible and Powerful Vue.js PDF Component

Just a quick background of what I’m working on. If you’re building a PDF experience into your Vue or Nuxt app, check out Vue PDF Viewer.

It has over 20 features component that lets users view and interact with PDFs right on your site. With built-in localization, theming, and responsive design, it’s made for teams who care about UX and maintainability.

I’d love your feedback and support, it helps me keep improving the tool and creating helpful content for the Vue community ❤️

---

Method 1: PDF.js

PDF.js is a powerful JavaScript library from Mozilla that allows rendering and interaction of PDFs directly in web browsers. PDF.js is framework agnostic and can be used in any Javascript framework such as Angular, React and Vue.

In Nuxt, you can use PDF.js by:

1. Install the PDF.js library via npm.

2. Create a component to display the PDF viewer.

3. Incorporate PDF.js into the component to render PDF files.

Here is the link to the code sample.

Pros

• Reliable: Developed by Mozilla and supported by the Firefox team.

• Active development: Regular updates and maintenance by Mozilla.

• Full control over rendering: You can customize rendering (zoom, page navigation, annotation, etc.).

• Supports advanced features: Such as rendering page by page, custom UI, highlighting, and more.

• Flexible without relying on external UI: You can build your own UI viewer as needed.

• Big community: Great for fixing issues and debugging on your own.

Cons

• Disorganized documentation: Not user-friendly technical document

• More complex to use: Require more code, including handling DOM and canvas

• Steep learning curve: Need to understand the inner workings of PDF.js

• Not a Vue component: Have to write a wrapper or integration for it to work well in Nuxt

---

Method 2: vue-pdf-embed

vue-pdf-embed simplifies the process of displaying PDF files in Vue or Nuxt applications. It provides an easy-to-use component to display PDFs without complex setup.

To use vue-pdf-embed in Nuxt, follow these steps:

1. Install the vue-pdf-embed library via npm.

2. Import and use the component in your App to display the PDF.

3. Set the URL or Path of the PDF file you want to display.

Here is the link to the code sample.

Pros

• Quick to use: Just import and use <VuePdfEmbed :source="..." /> (no need to render canvas manually).

• Ideal for general users or simple tasks: Perfect for simple PDF previews.

• Lightweight: Minimal overhead, especially if you don't need a custom UI.

Cons

• No SSR support: Does not work in Nuxt’s server-side rendering due to reliance on window and canvas.

• Minimal customization/features: Rendering logic and styling options are limited.

• Not suitable for complex PDF viewers: Lacks built-in search, zoom, or multi-page navigation.

• Lack of documentation: Advanced usage guides and tutorials are not provided.

• Smaller community: Support and troubleshooting might require waiting for an issue or PR from other users.

---

Method 3: @tato30/vue-pdf

@tato30/vue-pdf is a Vue wrapper around Mozilla’s PDF.js that offers a more Vue-friendly way to render PDFs. It supports most core features of PDF.js and makes it easier to integrate into Nuxt applications.

To get started:

1. Install @tato30/vue-pdf via npm or yarn.

2. `Import the component and register it globally or locally.

3. Use the component in your template and pass the PDF file URL using the src prop.

Here is the link link for code sample

Pros

• Vue/Nuxt support: Fully compatible with Vue and Nuxt using the Composition API.

• Simple API: Easy to use and integrate, even for beginners.

• PDF rendering flexibility: Supports individual page rendering, text layers, and annotation layers.

• Support for non-Latin fonts: With proper setup (e.g. cmaps), it can render PDFs with non-Latin characters.

Cons

• No SSR support: Rely on browser-specific APIs like window and canvas, which break in Nuxt SSR mode.

• No built-in multi-page rendering: You must manually loop through each page using v-for, which can affect performance.

• Lacks built-in UI controls: No default navigation elements (e.g. next/previous buttons, zoom controls, scrollbars). You must implement these controls yourself.

• Extra setup for some features: Enabling text layer, annotations, or non-Latin font rendering requires additional configuration.

• Smaller community: Issue resolution may be slower, with fewer active contributors.

---

Method 4: Vue PDF Viewer

The Vue PDF Viewer library offers a comprehensive PDF viewer component for Vue or Nuxt applications. Built on top of Mozilla’s PDF.js engine, it provides a full-featured UI experience that closely resembles popular desktop PDF viewers.

To add Vue PDF Viewer to your Nuxt app:

1. Install @vue-pdf-viewer/viewer and its peer dependency pdfjs-dist via npm or yarn.

2. Import and register the component in your Nuxt app.

3. Use the component in your template and set the PDF file URL or path via the src prop.

Here is the link to the code sample.

Pros

• Quick and easy setup: Install and render a fully working PDF viewer in just a few lines. Or use a ready-to-use setup from sample projects.

• Built-in toolbar: Comes with a fully functional toolbar with essential functions like page navigation, zoom, thumbnails, sidebar, text search and etc.

• Feature-rich PDF Viewer: Over 20+ standard features out-of-the-box, such as search, theme, print, download, rotate and etc.

• Highly customizable: Customize your Nuxt PDF Viewer to your own brand or build your own toolbar with Exposed APIs for search, highlight, print, rotate functions and more.

• Clear documentation: Well-written guides, tutorials, and examples help speed development.

• Actively maintained: Frequent updates, prompt bug fixes, and responsive support.

Cons

• Paid: Although you can try it free with watermark or through a free trial, a paid license is required to use in your Nuxt apps. Though, personally, the pricing plans are reasonable.

• No SSR (Server-Side Rendering) support: Depends on browser-specific APIs and cannot be rendered on the server (e.g. in Nuxt or other SSR setups).

• Larger bundle size: It includes full viewer UI components and assets, which is heavier as compared to smaller PDF viewer alternatives.

---

Conclusion

There’s no one-size-fits-all solution when it comes to rendering PDFs in a Nuxt application. Depending on your project’s needs, technical complexity, and user experience goals, each method covered brings something different to the table:

• Use PDF.js when you want absolute control and don’t mind investing in custom UI and handling complexity.

• Choose vue‑pdf‑embed if you simply need a lightweight and easy-to-use viewer.

• Go with @tato30/vue‑pdf for a balanced option between functionality and simplicity.

• Try Vue PDF Viewer @vue‑pdf‑viewer/viewer if your app requires a feature-rich solution built specifically for Vue or Nuxt, perfect for production-grade apps that need advanced functionality like search, theming, localization, and more.

Thanks again for reading! I hope this guide gave you a clearer picture of what fits your Nuxt project best. Feel free to leave your thoughts or questions in the comments, I’d love to hear what you’re building! 🙏