nuxt-pdf-kit

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
• 🧩 Nuxt 3, 4 and 5 - One package runs on Nuxt 3, Nuxt 4 and Nuxt 5
• 🎯 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="1kgN3QYrPhgeyoIehoTcarfwcIikKHIvE" />

  <!-- 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

Composables

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

Keyboard Shortcuts

Requirements

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

Contribution

# 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