Components

Methods

Exposed methods for programmatic control.

The NuxtPdfKit component exposes a controls object through a template ref for programmatic control.

Usage

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

<script setup>
const pdfViewer = ref(null)

function goToPage5() {
  pdfViewer.value?.controls.pageControl.goToPage(5)
}
</script>

Available Controls

Group	Property	Type	Description
`pageControl`	`goToPage`	`(page: number) => void`	Navigate to a specific page
`pageControl`	`prevPage`	`() => void`	Go to the previous page
`pageControl`	`nextPage`	`() => void`	Go to the next page
`pageControl`	`currentPage`	`number` (readonly)	Current page number
`pageControl`	`totalPages`	`number` (readonly)	Total number of pages
`zoomControl`	`zoomIn`	`() => void`	Increase zoom level
`zoomControl`	`zoomOut`	`() => void`	Decrease zoom level
`zoomControl`	`setZoom`	`(level: number \| ZoomLevel) => void`	Set specific zoom level
`zoomControl`	`scale`	`number` (readonly)	Current zoom scale
`zoomControl`	`zoomMode`	`ZoomLevel` (readonly)	Current zoom mode
`rotateControl`	`rotateClockwise`	`() => void`	Rotate +90°
`rotateControl`	`rotateCounterclockwise`	`() => void`	Rotate -90°
`rotateControl`	`rotation`	`number` (readonly)	Current rotation (0, 90, 180, 270)
`searchControl`	`search`	`(query: string) => void`	Perform a search
`searchControl`	`nextMatch`	`() => void`	Go to next match
`searchControl`	`prevMatch`	`() => void`	Go to previous match
`searchControl`	`clearSearch`	`() => void`	Clear search results
`searchControl`	`query`	`string` (readonly)	Current search query
`searchControl`	`matches`	`SearchMatch[]` (readonly)	Search matches
`searchControl`	`currentMatchIndex`	`number` (readonly)	Current match index
`printControl`	`print`	`() => void`	Open print dialog
`downloadControl`	`download`	`() => void`	Download the PDF
`viewControl`	`setViewMode`	`(mode: ViewMode) => void`	Set view mode
`viewControl`	`setScrollMode`	`(mode: ScrollMode) => void`	Set scroll mode
`viewControl`	`toggleSidebar`	`() => void`	Toggle the thumbnail sidebar
`viewControl`	`toggleFullscreen`	`() => void`	Toggle fullscreen
`viewControl`	`viewMode`	`ViewMode` (readonly)	Current view mode
`viewControl`	`scrollMode`	`ScrollMode` (readonly)	Current scroll mode
`viewControl`	`isFullscreen`	`boolean` (readonly)	Fullscreen state
`viewControl`	`isSidebarVisible`	`boolean` (readonly)	Sidebar state
`themeControl`	`toggleTheme`	`() => void`	Toggle light/dark theme
`themeControl`	`isDark`	`boolean` (readonly)	Dark mode state

Page Navigation

<script setup>
const pdfViewer = ref(null)

// Go to page 10
pdfViewer.value?.controls.pageControl.goToPage(10)

// Navigation
pdfViewer.value?.controls.pageControl.nextPage()
pdfViewer.value?.controls.pageControl.prevPage()
</script>

Zoom

<script setup>
const pdfViewer = ref(null)

pdfViewer.value?.controls.zoomControl.zoomIn()
pdfViewer.value?.controls.zoomControl.zoomOut()

// Set to 150%
pdfViewer.value?.controls.zoomControl.setZoom(1.5)

// Fit to page
pdfViewer.value?.controls.zoomControl.setZoom('page-fit')

// Fit to width
pdfViewer.value?.controls.zoomControl.setZoom('page-width')
</script>

Rotate

<script setup>
const pdfViewer = ref(null)

pdfViewer.value?.controls.rotateControl.rotateClockwise()
pdfViewer.value?.controls.rotateControl.rotateCounterclockwise()
</script>

Search

<script setup>
const pdfViewer = ref(null)

pdfViewer.value?.controls.searchControl.search('invoice')
pdfViewer.value?.controls.searchControl.nextMatch()
pdfViewer.value?.controls.searchControl.clearSearch()
</script>

Print & Download

<script setup>
const pdfViewer = ref(null)

pdfViewer.value?.controls.printControl.print()
pdfViewer.value?.controls.downloadControl.download()
</script>

View Mode & Theme

<script setup>
const pdfViewer = ref(null)

// View and scroll mode
pdfViewer.value?.controls.viewControl.setViewMode('dual')
pdfViewer.value?.controls.viewControl.setScrollMode('horizontal')

// Sidebar and fullscreen
pdfViewer.value?.controls.viewControl.toggleSidebar()
pdfViewer.value?.controls.viewControl.toggleFullscreen()

// Theme
pdfViewer.value?.controls.themeControl.toggleTheme()
</script>

Complete Example

<template>
  <div class="flex flex-col gap-4">
    <!-- Custom Controls -->
    <div class="flex gap-2">
      <UButton @click="pdfViewer?.controls.pageControl.prevPage()">Previous</UButton>
      <UButton @click="pdfViewer?.controls.pageControl.nextPage()">Next</UButton>
      <UButton @click="pdfViewer?.controls.zoomControl.zoomIn()">Zoom In</UButton>
      <UButton @click="pdfViewer?.controls.zoomControl.zoomOut()">Zoom Out</UButton>
      <UButton @click="pdfViewer?.controls.rotateControl.rotateClockwise()">Rotate</UButton>
      <UButton @click="pdfViewer?.controls.printControl.print()">Print</UButton>
      <UButton @click="pdfViewer?.controls.downloadControl.download()">Download</UButton>
    </div>

    <!-- PDF Viewer -->
    <div class="h-[600px]">
      <NuxtPdfKit ref="pdfViewer" src="/document.pdf" />
    </div>
  </div>
</template>

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

Edit this pageorReport an issue

Slots

Available slots for customizing NuxtPdfKit.

Overview

Overview of all composables provided by Nuxt PDF Kit.