Props

Props Reference

src

Required. The URL or path to the PDF file.

<!-- From public folder -->
<NuxtPdfKit src="/sample.pdf" />

<!-- From external URL -->
<NuxtPdfKit src="https://example.com/document.pdf" />

provider

The file source provider. Defaults to 'url'.

• url: Load from a direct URL or the public/ folder (default)
• gdrive: Load from a Google Drive file ID through the built-in proxy
• custom: Load through a custom provider (see File Providers)

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

providerConfig

Provider-specific configuration, such as a custom base URL or transform function.

<NuxtPdfKit
  provider="custom"
  src="file-123"
  :provider-config="{ baseUrl: '/cdn' }"
/>

theme

Initial theme for the PDF viewer. Options: 'light' or 'dark'.

<NuxtPdfKit src="/document.pdf" theme="dark" />

responsive

When enabled, automatically fits pages to the container width.

<NuxtPdfKit src="/document.pdf" :responsive="true" />

initialViewMode

Initial view mode for displaying pages.

• single: Display one page at a time
• dual: Display two pages side by side
• dual-cover: Display two pages with first page as cover

<NuxtPdfKit src="/document.pdf" initial-view-mode="dual" />

initialScrollMode

Initial scroll mode for navigating the document.

• vertical: Scroll vertically through pages
• horizontal: Scroll horizontally through pages
• wrapped: Wrap pages in a grid layout
• page: Navigate page by page

<NuxtPdfKit src="/document.pdf" initial-scroll-mode="horizontal" />

virtualScroll

Enable virtual scrolling for better performance with large documents.

<NuxtPdfKit src="/document.pdf" :virtual-scroll="true" />

virtualScrollThreshold

Number of pages threshold to enable virtual scrolling.

<NuxtPdfKit src="/document.pdf" :virtual-scroll-threshold="20" />

toolbar

Override the global toolbar configuration for this specific instance.

<NuxtPdfKit 
  src="/document.pdf" 
  :toolbar="{
    search: true,
    print: false,
    download: true
  }"
/>

title / author / subject / keywords / creator / producer

Override individual document metadata properties. These take precedence over the PDF's embedded metadata.

<NuxtPdfKit
  src="/document.pdf"
  title="Quarterly Report"
  author="Acme Corp"
/>

documentInfo

Override multiple document properties at once using a single object.

<NuxtPdfKit
  src="/document.pdf"
  :document-info="{
    title: 'Quarterly Report',
    author: 'Acme Corp',
    subject: 'Finance',
  }"
/>