A feature-rich PDF viewer module for Nuxt with Nuxt UI and Tailwind CSS v4.

• ✨  Release Notes

Why?

Building a PDF viewer in Nuxt requires dealing with PDF.js complexity, SSR issues, and creating a good UI from scratch. Nuxt PDF Kit provides:

• 🎨 Beautiful UI - Beautiful, responsive interface with dark/light mode
• ⚡ SSR Compatible - Works out of the box with Nuxt's server-side rendering
• 🔧 Zero Config - Auto-installs dependencies (@nuxt/ui, @vueuse/nuxt)
• 📱 Responsive - Mobile-friendly with adaptive toolbar
• 🎯 Feature Complete - Search, zoom, rotate, print, download, and more

Features

• 📄 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 persistence
• 🖨️ Print & Download - Native print and download support
• 📊 Virtual Scrolling - Efficient rendering for large documents
• 📐 Responsive Mode - Auto-fit pages to container width

Quick Setup

Install the module to your Nuxt application:

npx nuxi module add nuxt-pdf-kit

Or manually:

npm install nuxt-pdf-kit

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["nuxt-pdf-kit"],
});

Usage

<template>
  <NuxtPdfKit src="/sample.pdf" />
</template>

With Options

<template>
  <NuxtPdfKit
    src="/document.pdf"
    theme="dark"
    :responsive="true"
    initial-view-mode="single"
    initial-scroll-mode="vertical"
  />
</template>

Programmatic Control

<template>
  <NuxtPdfKit ref="pdfViewer" src="/document.pdf" />
  <button @click="pdfViewer?.goToPage(5)">Go to Page 5</button>
</template>

<script setup>
const pdfViewer = ref(null);
</script>

File Providers

Load PDFs from different sources:

<template>
  <!-- Direct URL (default) -->
  <NuxtPdfKit src="/sample.pdf" />

  <!-- Google Drive -->
  <NuxtPdfKit provider="gdrive" src="1bAsv95pTaBiHyGiWFIa-zebT31Al_0tu" />

  <!-- Custom CDN/Proxy -->
  <NuxtPdfKit
    provider="custom"
    src="file-123"
    :provider-config="{ baseUrl: '/cdn' }"
  />
</template>

Supported Providers:

• url - Direct URLs (default)
• gdrive - Google Drive files
• custom - Custom CDN or proxy server

See Provider Documentation for more details.

Configuration

Configure the module in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ["nuxt-pdf-kit"],
  pdfKit: {
    // Auto-install @nuxt/ui (default: true)
    ui: true,
    // Auto-install @vueuse/nuxt (default: true)
    vueuse: true,
    // Toolbar configuration
    toolbar: {
      sidebar: true, // Thumbnail sidebar toggle
      pageNavigation: true, // Page navigation controls
      zoom: true, // Zoom controls
      search: true, // Search tool
      rotate: true, // Rotate button
      openFile: false, // Open file button
      print: true, // Print button
      download: true, // Download button
      fullscreen: true, // Fullscreen button
      themeToggle: true, // Theme toggle button
      moreOptions: true, // More options menu
    },
  },
});

Props

Prop	Type	Default	Description
src	string	required	URL or path to PDF file
theme	'light' | 'dark'	'light'	Initial theme
responsive	boolean	true	Auto-fit pages to container width
initialViewMode	'single' | 'dual' | 'dual-cover'	'single'	Initial view mode
initialScrollMode	'vertical' | 'horizontal' | 'wrapped' | 'page'	'vertical'	Initial scroll mode
virtualScroll	boolean	true	Enable virtual scrolling
virtualScrollThreshold	number	10	Pages threshold for virtual scrolling
toolbar	ToolbarOptions	-	Override toolbar config

Composables

All composables are prefixed with usePdfKit following Nuxt module best practices:

Composable	Description
usePdfKitDocument	PDF document loading and management
usePdfKitZoom	Zoom controls and scale management
usePdfKitSearch	Text search with highlighting
usePdfKitViewMode	View mode and scroll mode
usePdfKitVirtualScroll	Virtual scrolling for large documents
usePdfKitRotation	Document rotation
usePdfKitPageNavigation	Page navigation utilities

Keyboard Shortcuts

Key	Action
← ↑	Previous page
→ ↓	Next page
+ =	Zoom in
-	Zoom out
Ctrl/Cmd + F	Focus search
Escape	Exit fullscreen / Clear search

Requirements

• Nuxt >= 3.0.0
• Node.js >= 18

Contribution

Local development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release

License

MIT License