Resource
A curated collection of documentation, guides, and tutorials organized by feature category to help you get the most out of Vue PDF Viewer.
Getting Started
- Install and set up Vue PDF Viewer in your Vue 3 or Nuxt project
- Render a PDF document with the VPdfViewer component
- Scaffold a project quickly with the starter toolkit
- Create a reusable PDF viewer wrapper component
- Configure Vue PDF Viewer for Nuxt client-side rendering
- Override the bundled PDF.js version or worker URL
- Change PDF files dynamically by updating the src prop
- Browse all available VPdfViewer props
- Explore TypeScript interfaces and type definitions
Annotation
- Overview of the annotation plugin and supported types
- Install and register the annotation plugin
- Configure available annotation tools and their defaults
- Handle annotation events with callback functions
- Configure annotation options for free text, highlight, image, and text selection
- Reference annotation TypeScript interfaces
Customizable
- Add a custom localization to translate the viewer UI
- Adjust CSS variables and styles to match your design
- Show, hide, or reorder toolbar buttons
- Get started with the built-in toolbar
- Replace toolbar icons with custom SVGs or components
- Build your own toolbar from scratch
- Listen for dark mode toggle changes with
update:darkModeevent - Customize toolbar tool components with named slots
- Override toolbar icons through icon slots
- Replace the theme toggle with a custom switcher
- Define localization object structure with the
Localizationinterface - Control toolbar visibility with the
ToolbarOptionsinterface
Interactive
- Search for text within a PDF and navigate between matches
- Highlight multiple keywords with different colors
- Manage text highlights programmatically across pages
- Capture and output user-selected text from the PDF
- Customize the full screen toggle button via slot
- Switch between text selection and hand tool modes
General
- Customize the viewer layout with slots and props
- Control PDF operations programmatically via instance API
- Trigger PDF downloads with optional custom filenames
- Initiate PDF printing programmatically
- Display a print preview dialog before printing
- Open print preview from a custom button or modal
- Handle password-protected PDFs with a custom UI
- Detect when a PDF document has fully loaded with
loadedevent - Track PDF loading progress with
loadProgressevent - Handle document loading errors with
loadErrorevent - Respond to password prompts with
passwordRequiredevent - Detect successful password entry with
passwordSuccessevent - Handle incorrect passwords with
passwordErrorevent - Browse all available named slots for the viewer
- Replace the download button via
downloadToolslot - Customize the open file button via
openFileToolslot - Override the drag-and-drop file zone via
dropFileZoneslot - Replace the print button via
printToolslot - Customize the loading indicator via
loaderslot - Configure document loading with
PdfDocumentOptionsinterface - Specify a character map for CJK and complex scripts
Navigation
- Navigate to specific pages programmatically
- Rotate the PDF document clockwise or counterclockwise
- Control zoom level with zoom in, zoom out, and fit-to-page
- Track the current page number with
pageChangedevent - Detect rotation changes with
rotateevent - Monitor scroll position with
scrollevent - Replace page navigation controls via
pageNavigationToolslot - Customize the thumbnail sidebar via
thumbnailToolslot - Replace zoom controls via
zoomToolslot - Set scroll direction with
ScrollModeinterface - Configure page view layout with
ViewModeinterface - Use predefined zoom levels with
ZoomLevelinterface