Getting Started
Installation
Get started with Nuxt PDF Kit.
Quick Installation
The easiest way to add Nuxt PDF Kit to your Nuxt application is using the Nuxt CLI:
Terminal
npx nuxt module add nuxt-pdf-kit
This command automatically adds the module to your
nuxt.config.ts and installs the package.Manual Installation
If you prefer to install manually, follow these steps:
Install the package
Using your preferred package manager:
npm i nuxt-pdf-kit
yarn add nuxt-pdf-kit
pnpm add nuxt-pdf-kit
bun add nuxt-pdf-kit
Add to Nuxt Config
Add nuxt-pdf-kit to the modules array in your nuxt.config.ts:
nuxt.config.ts
export default defineNuxtConfig({
modules: ["nuxt-pdf-kit"],
});
Start using the PDF viewer
You're ready to use the PDF viewer in your components:
app.vue
<template>
<NuxtPdfKit src="/sample.pdf" />
</template>
Module Configuration
You can configure the module globally in your nuxt.config.ts:
nuxt.config.ts
export default defineNuxtConfig({
modules: ["nuxt-pdf-kit"],
pdfKit: {
// 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 (disabled by default)
print: true, // Print button
download: true, // Download button
fullscreen: true, // Fullscreen button
themeToggle: true, // Theme toggle button
moreOptions: true, // More options menu
},
},
});
Toolbar Options
sidebar
boolean
Show/hide the thumbnail sidebar toggle button.
pageNavigation
boolean
Show/hide page navigation controls (previous/next page buttons and page input).
zoom
boolean
Show/hide zoom controls (zoom in, zoom out, and zoom level selector).
search
boolean
Show/hide the search tool for full-text search functionality.
rotate
boolean
Show/hide the rotate button for document rotation.
openFile
boolean
Show/hide the open file button (disabled by default for security).
print
boolean
Show/hide the print button for native print functionality.
download
boolean
Show/hide the download button to save the PDF.
fullscreen
boolean
Show/hide the fullscreen toggle button.
themeToggle
boolean
Show/hide the theme toggle button (light/dark mode).
moreOptions
boolean
Show/hide the more options dropdown menu.
Auto-Installed Dependencies
Nuxt PDF Kit automatically manages its dependencies. The following packages are automatically installed if not present:
| Package | Description |
|---|---|
@nuxt/ui | Nuxt UI for the premium interface components |
@vueuse/nuxt | VueUse composables for enhanced functionality |
pdfjs-dist | Mozilla's PDF.js library for PDF rendering |
You don't need to install these packages manually. Nuxt PDF Kit handles the installation automatically when you add the module.
Basic Usage
Once installed, you can use the NuxtPdfKit component anywhere in your application:
<template>
<div class="h-screen">
<NuxtPdfKit src="/document.pdf" />
</div>
</template>
Loading from URL
<template>
<NuxtPdfKit src="https://example.com/document.pdf" />
</template>
Loading from public folder
Place your PDF in the public/ folder and reference it directly:
<template>
<NuxtPdfKit src="/my-document.pdf" />
</template>
Next Steps
Now that you have Nuxt PDF Kit installed, you can:
- Learn about the Component Props to customize the viewer
- Explore the Composables for programmatic control
- Check out the Module Options for global configuration