Introduction
Welcome to Nuxt PDF Kit, a complete PDF viewer module for Nuxt, built with Nuxt UI and Tailwind CSS v4.
What is Nuxt PDF Kit?
Nuxt PDF Kit is a comprehensive solution for displaying, navigating, and interacting with PDF documents in your Nuxt applications. Powered by PDF.js, it offers a beautiful and responsive interface right out of the box.
PDF Rendering
Full-Text Search
Nuxt UI
Dark Mode
Why Choose Nuxt PDF Kit?
Building a PDF viewer in Nuxt requires addressing the following challenges:
- PDF.js complexity - Understanding and configuring the PDF.js library
- SSR issues - Handling client-only components and hydration
- UI development - Creating a responsive, accessible interface from scratch
- Feature implementation - Adding features like search, zoom, print, download, and more
Nuxt PDF Kit solves all these challenges by providing:
Key Features
Nuxt PDF Kit includes everything you need for a complete PDF viewing experience:
| Feature | Description |
|---|---|
| PDF Rendering | High-quality rendering with PDF.js |
| Text Search | Full-text search with highlighting and navigation |
| Zoom Controls | Zoom in/out, fit page, fit width, custom percentage |
| Rotation | Rotate documents clockwise |
| View Modes | Single page, dual page, dual with cover |
| Scroll Modes | Vertical, horizontal, wrapped, page-by-page |
| Thumbnails | Sidebar with page thumbnails |
| Keyboard Shortcuts | Navigate with arrow keys, zoom with +/- |
| Dark Mode | Built-in theme toggle with session persistence |
| Print & Download | Native print and download support |
| Virtual Scrolling | Efficient rendering for large documents |
| Responsive Mode | Auto-fit pages to the container width |
Requirements
Before getting started, ensure your project meets the following requirements:
- Nuxt >= 3.0.0
- Node.js >= 18
@nuxt/ui and @vueuse/nuxt, if they are not already present in your project.Quick Example
Here’s a simple example to help you get started:
<template>
<NuxtPdfKit src="/sample.pdf" />
</template>
That's it! You now have a fully-featured PDF viewer in your Nuxt application.
Ready to get started? Head over to the Installation guide.