Interfaces

CanvasLoadedCallback

This callback function will run after a particular page is rendered. It provides sizes of both canvas object and PDF page so that one may add more object(s) to that page's canvas layer.

function	description
`(canvasElement: HTMLCanvasElement, viewport: ViewportDimensions) => void`	Callback function to call after the canvas element is rendered

ViewportDimensions

type	description
height	Height of the PDF page
width	Width of the PDF page
canvasHeight	Height of the canvas object
canvasWidth	Width of the canvas object
widthRatio	Ratio of the canvas width to the page width
heightRatio	Ratio of the canvas height to the page height

Example

Composition TSComposition JSOptions TSOptions JS

vue

<script setup lang="ts">
  import { VPdfViewer, type CanvasLoadedCallback } from '@vue-pdf-viewer/viewer';
  const pdfFileSource = "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
  const addPageNumberOnCanvas = (pageNumber: number, element: HTMLCanvasElement, viewport: ViewportDimensions) => {
    const context = element.getContext('2d')
    const { width, widthRatio } = viewport;
    // this code will write text `${pageNumber}` to the top-right of the canvas after page content is rendered
    context?.fillText(`${pageNumber}`, (width * widthRatio) - 50, 50)
  }
  const afterCanvasLoaded: Record<number, CanvasLoadedCallback> = {
    1: (element, viewport) => addPageNumberOnCanvas(1, element, viewport),
    2: (element, viewport) => addPageNumberOnCanvas(2, element, viewport),
  }
</script>
<template>
  <div :style="{ width: '1028px', height: '700px'}">
    <VPdfViewer
      :src="pdfFileSource"
      :after-canvas-loaded="afterCanvasLoaded"
    />
  </div>
</template>

vue

<script setup>
  import { VPdfViewer } from '@vue-pdf-viewer/viewer';
  const pdfFileSource = "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
  const addPageNumberOnCanvas = (pageNumber, element, viewport) => {
    const context = element.getContext('2d')
    const { width, widthRatio } = viewport;
    // this code will write text `${pageNumber}` to the top-right of the canvas after page content is rendered
    context?.fillText(`${pageNumber}`, (width * widthRatio) - 50, 50)
  }
  const afterCanvasLoaded = {
    1: (element, viewport) => addPageNumberOnCanvas(1, element, viewport),
    2: (element, viewport) => addPageNumberOnCanvas(2, element, viewport),
  }
</script>
<template>
  <div :style="{ width: '1028px', height: '700px'}">
    <VPdfViewer
      :src="pdfFileSource"
      :after-canvas-loaded="afterCanvasLoaded"
    />
  </div>
</template>

vue

<script lang="ts">
  import { VPdfViewer, type CanvasLoadedCallback } from '@vue-pdf-viewer/viewer';
  import { defineComponent } from 'vue'

  export default defineComponent({
    components: { VPdfViewer },
    data(): { pdfFileSource: string; afterCanvasLoaded: Record<number, CanvasLoadedCallback> } {
      return {
        pdfFileSource:
          'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
        afterCanvasLoaded: {
          1: (element, viewport) => this.addPageNumberOnCanvas(1, element, viewport),
          2: (element, viewport) => this.addPageNumberOnCanvas(2, element, viewport),
        }
      }
    },
    methods: {
      addPageNumberOnCanvas(pageNumber: number, element: HTMLCanvasElement, viewport: ViewportDimensions) {
        const context = element.getContext('2d')
        const { width, widthRatio } = viewport
        // this code will write text `${pageNumber}` to the top-right of the canvas after page content is rendered
        context?.fillText(`${pageNumber}`, (width * widthRatio) - 50, 50)
      }
    }
  })
</script>
<template>
  <div :style="{ width: '1028px', height: '700px'}">
    <VPdfViewer
      :src="pdfFileSource"
      :after-canvas-loaded="afterCanvasLoaded"
    />
  </div>
</template>

vue

<script >
  import { VPdfViewer } from '@vue-pdf-viewer/viewer';

  export default {
    components: { VPdfViewer },
    data() {
      return {
        pdfFileSource:
          'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
        afterCanvasLoaded: {
          1: (element, viewport) => this.addPageNumberOnCanvas(1, element, viewport),
          2: (element, viewport) => this.addPageNumberOnCanvas(2, element, viewport),
        }
      }
    },
    methods: {
      addPageNumberOnCanvas(pageNumber, element, viewport) {
        const context = element.getContext('2d')
        const { width, widthRatio } = viewport
        // this code will write text `${pageNumber}` to the top-right of the canvas after page content is rendered
        context?.fillText(`${pageNumber}`, (width * widthRatio) - 50, 50)
      }
    }
  }
</script>
<template>
  <div :style="{ width: '1028px', height: '700px'}">
    <VPdfViewer
      :src="pdfFileSource"
      :after-canvas-loaded="afterCanvasLoaded"
    />
  </div>
</template>

CharacterMap

Key	Description	Type
url	The URL or relative path where the predefined Adobe CMaps are located. It must have `/` at the end.	`string`
isCompressed	Specify if the Adobe CMaps are binary packed. The default value is `true`.	`boolean`

Composition TSComposition JSOptions TSOptions JS

vue

<script setup lang="ts">
import { VPdfViewer } from "@vue-pdf-viewer/viewer";

const pdfFileSource =
  "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      :src="pdfFileSource"
      :character-map="{
        url: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.288/cmaps/',
        isCompressed: true,
      }"
    />
  </div>
</template>

vue

<script setup>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";

const pdfFileSource =
  "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      :src="pdfFileSource"
      :character-map="{
        url: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.288/cmaps/',
        isCompressed: true,
      }"
    />
  </div>
</template>

vue

<script lang="ts">
import { defineComponent } from "vue";
import { VPdfViewer } from "@vue-pdf-viewer/viewer";

export default defineComponent({
  components: { VPdfViewer },
  data() {
    return {
      pdfFileSource:
        "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
    };
  },
});
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      :src="pdfFileSource"
      :character-map="{
        url: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.288/cmaps/',
        isCompressed: true,
      }"
    />
  </div>
</template>

vue

<script>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";

export default {
  components: { VPdfViewer },
  data() {
    return {
      pdfFileSource:
        "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
    };
  },
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      :src="pdfFileSource"
      :character-map="{
        url: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.288/cmaps/',
        isCompressed: true,
      }"
    />
  </div>
</template>

When you download CMaps files and place them in the public/cmaps directory

Composition TSComposition JSOptions TSOptions JS

vue

<script setup lang="ts">
import { VPdfViewer } from "@vue-pdf-viewer/viewer";

const pdfFileSource =
  "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      :src="pdfFileSource"
      :character-map="{
        url: '/cmaps/',
        isCompressed: true,
      }"
    />
  </div>
</template>

vue

<script setup>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";

const pdfFileSource =
  "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      :src="pdfFileSource"
      :character-map="{
        url: '/cmaps/',
        isCompressed: true,
      }"
    />
  </div>
</template>

vue

<script lang="ts">
import { defineComponent } from "vue";
import { VPdfViewer } from "@vue-pdf-viewer/viewer";

export default defineComponent({
  components: { VPdfViewer },
  data() {
    return {
      pdfFileSource:
        "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
    };
  },
});
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      :src="pdfFileSource"
      :character-map="{
        url: '/cmaps/',
        isCompressed: true,
      }"
    />
  </div>
</template>

vue

<script>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";

export default {
  components: { VPdfViewer },
  data() {
    return {
      pdfFileSource:
        "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
    };
  },
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      :src="pdfFileSource"
      :character-map="{
        url: '/cmaps/',
        isCompressed: true,
      }"
    />
  </div>
</template>

Localization

Currently, Vue PDF Viewer component comes with built-in translations of 5 languages, namely: The default localizations provided are:

en_US (English - United States)
it_IT (Italian - Italy)
pt_PT (Portuguese - Portugal)
th_TH (Thai - Thailand)
zh_CN (Chinese - China)

To change the translations, Vue PDF Viewer provides localization keys for easy customization. Each key corresponds to a specific text that will be displayed in the component for each locale.

Here are the available localization keys:

Click to expand

Key	Description	Type	Default (en_US)
annotationCommentLabel	Label of the annotation comment tool	`string`	Comment
annotationCommentTooltip	Tooltip text of the annotation comment tool	`string`	Add comment annotation
annotationFreeTextDeleteTooltip	Tooltip text of the delete button for free text annotation	`string`	Delete text annotation
annotationFreeTextFontColorLabel	Label of the font color picker for free text annotation	`string`	Font color
annotationFreeTextLabel	Label of the free text annotation tool	`string`	Text
annotationFreeTextTextSizeLabel	Label of the text size input for free text annotation	`string`	Text size
annotationFreeTextTextSizePlaceholder	Placeholder of the text size input for free text annotation	`string`	Enter size
annotationFreeTextTextSizeTooltip	Tooltip text of the text size input for free text annotation	`string`	Set text size
annotationFreeTextTextStyleLabel	Label of the text style options for free text annotation	`string`	Text style
annotationFreeTextTextStyleTooltip	Tooltip text of the text style options for free text annotation	`string`	Set text style
annotationFreeTextTooltip	Tooltip text of the free text annotation tool	`string`	Add text annotation
annotationHighlightColorPickerLabel	Label of the highlight color picker	`string`	Highlight color
annotationHighlightColorTooltip	Tooltip text of the highlight color picker	`string`	Change highlight color
annotationHighlightDeleteTooltip	Tooltip text of the delete button for highlight annotation	`string`	Delete highlight
annotationHighlightLabel	Label of the highlight annotation tool	`string`	Highlight
annotationHighlightTooltip	Tooltip text of the highlight annotation tool	`string`	Highlight text
annotationImageDeleteTooltip	Tooltip text of the delete button for image annotation	`string`	Delete image
annotationImageLabel	Label of the image annotation tool	`string`	Image
annotationImageTooltip	Tooltip text of the image annotation tool	`string`	Add image annotation
annotationImageUnsupportedFileMessage	Error message when unsupported image file is selected	`string`	Unsupported file format
annotationLabel	Label of the annotation panel/toolbar	`string`	Annotations
annotationSignatureAddLabel	Label of the add signature button	`string`	Add signature
annotationSignatureAddTooltip	Tooltip text of the add signature button	`string`	Add new signature
annotationSignatureLabel	Label of the signature annotation tool	`string`	Signature
annotationSignatureTooltip	Tooltip text of the signature annotation tool	`string`	Add signature
annotationToggleHideTooltip	Tooltip text of the button to hide annotations	`string`	Hide annotations
annotationToggleShowTooltip	Tooltip text of the button to show annotations	`string`	Show annotations
commentHideTooltip	Tooltip text of the hide comment button	`string`	Hide comment
commentLabel	Label of the comment section	`string`	Comments
commentPagePrefix	Prefix text before page number in comment	`string`	Page
commentPageSuffix	Suffix text after page number in comment	`string`	-
commentPanelLabel	Label of the comment panel	`string`	Comments
commentPanelTooltip	Tooltip text of the comment panel button	`string`	Open comment panel
currentPageTooltip	Tooltip text of the current page input	`string`	Current page
documentPropertiesLabel	Label of the document properties option in `More Options` and the title of document properties modal	`string`	Document properties
documentPropertiesTooltip	Tooltip text of the document properties option	`string`	View document properties
downloadFileLabel	Label of the download icon	`string`	Download
downloadFileTooltip	Tooltip text of the download icon	`string`	Download
dragDropFileMessage	Message of the drag & drop mask when a file is dragged over the component	`string`	Drag and drop the PDF file here
dualPageLabel	Label of the dual page panel in `More Options`	`string`	Dual Page
dualPageTooltip	Tooltip text of the dual page option	`string`	Enable dual page view
dualPageWithCoverLabel	Label of the dual page with cover panel in `More Options`	`string`	Dual Page with cover
dualPageWithCoverTooltip	Tooltip text of the dual page with cover option	`string`	Enable dual page view with cover
firstPageLabel	Label of the first page option in `More Options`	`string`	First page
firstPageTooltip	Tooltip text of the first page option	`string`	Go to first page
fullScreenLabel	Label of the full screen option in `More Options` on mobile responsive	`string`	Full screen
fullScreenTooltip	Tooltip text of the full screen button and the full screen option	`string`	Full screen
handToolLabel	Label of the hand tool option in `More options`	`string`	Hand tool
handToolTooltip	Tooltip text of the hand tool option	`string`	Enable hand tool
horizontalLabel	Label of the horizontal scrolling option in `More Options`	`string`	Horizontal Scrolling
horizontalTooltip	Tooltip text of the horizontal scrolling option	`string`	Enable horizontal scrolling
lastPageLabel	Label of the last page option in `More Options`	`string`	Last page
lastPageTooltip	Tooltip text of the last page option	`string`	Go to last page
moreOptionTooltip	Tooltip text of the `More Options` button	`string`	More options
nextPageTooltip	Tooltip text of the next page button	`string`	Next page
openLocalFileLabel	Label of open local file option within `More Options` on mobile responsive	`string`	Open local file
openLocalFileTooltip	Tooltip text of the open local file button and open local file option	`string`	Open local file
pageScrollingLabel	Label of the page scrolling option in `More Options`	`string`	Page Scrolling
pageScrollingTooltip	Tooltip text of the page scrolling option	`string`	Enable page scrolling
passwordConfirmLabel	Label of the confirm button in the password modal	`string`	Submit
passwordError	Error message in the password modal when the password is incorrect	`string`	Incorrect password
passwordModalMessage	Description message of the input password modal	`string`	This document is password protected. Please enter a password to open the file
passwordModalTitle	Title of the input password modal	`string`	Password Required
passwordPlaceholder	Input placeholder of the password modal	`string`	Enter password
previousPageTooltip	Tooltip text of the previous page button	`string`	Previous page
printCancelLabel	Label of the button to cancel printing process	`string`	Cancel
printLabel	Label of print option in `More Options` on mobile responsive	`string`	Print
printLoadingMessage	Loading message on the progress modal while preparing printing	`string`	Preparing Document
printTooltip	Tooltip text of the print button and the print option	`string`	Print
propertiesAuthorLabel	Label of the author in document properties modal	`string`	Author
propertiesCreateOnLabel	Label of the created date in document properties modal	`string`	Created on
propertiesCreatorLabel	Label of the creator in document properties modal	`string`	Creator
propertiesFilenameLabel	Label of the filename in document properties modal	`string`	File name
propertiesFileSizeLabel	Label of the file size in document properties modal	`string`	File size
propertiesKeywordLabel	Label of the keyword in document properties modal	`string`	Keywords
propertiesModifiedOnLabel	Label of the modified date in document properties modal	`string`	Modified on
propertiesPageCountLabel	Label of the page count in document properties modal	`string`	Page count
propertiesPDFProducerLabel	Label of the PDF producer in document properties modal	`string`	PDF producer
propertiesPDFVersionLabel	Label of the PDF version in document properties modal	`string`	PDF version
propertiesSubjectLabel	Label of the subject in document properties modal	`string`	Subject
propertiesTitleLabel	Label of the title in document properties modal	`string`	Title
rotateClockwiseLabel	Label of the rotate clockwise option in `More Options`	`string`	Rotate clockwise
rotateClockwiseTooltip	Tooltip text of the rotate clockwise option	`string`	Rotate clockwise
rotateCounterclockwiseLabel	Label of the rotate counterclockwise option in `More Options`	`string`	Rotate counterclockwise
rotateCounterclockwiseTooltip	Tooltip text of the rotate counterclockwise option	`string`	Rotate counterclockwise
searchButtonTooltip	Tooltip text of the search button	`string`	Search in Document
searchCloseButtonTooltip	Tooltip text of the close icon for the search popover	`string`	Close
searchInputPlaceholder	Placeholder of the search input	`string`	Enter to search
searchInputTooltip	Tooltip text of the search input	`string`	Search
searchMatchCaseLabel	Label of the search match case option	`string`	Match case
searchMatchCaseTooltip	Tooltip text of the search match case option	`string`	Search case sensitive text
searchNextTooltip	Tooltip text of the next search match icon	`string`	Next match
searchPrevTooltip	Tooltip text of the previous search match icon	`string`	Previous match
searchWholeWordsLabel	Label of the search whole words option	`string`	Whole Words
searchWholeWordsTooltip	Tooltip text of the search whole words option	`string`	Search exact and case insensitive word(s)
singlePageLabel	Label of the single page panel option in `More Options`	`string`	Single Page
singlePageTooltip	Tooltip text of the single page option	`string`	Enable single page view
textSelectionLabel	Label of the text selection option in `More Options`	`string`	Text selection tool
textSelectionTooltip	Tooltip text of the text selection option	`string`	Enable text selection tool
themeEnableDarkTooltip	Tooltip text of the button to enable dark theme	`string`	Enable dark theme
themeEnableLightTooltip	Tooltip text of the button to enable light theme	`string`	Enable light theme
thumbnailTooltip	Tooltip text of the thumbnail button	`string`	Thumbnail
verticalScrollingLabel	Label of the vertical scrolling option in `More Options`	`string`	Vertical Scrolling
verticalScrollingTooltip	Tooltip text of the vertical scrolling option	`string`	Enable vertical scrolling
wrappedScrollingLabel	Label of the wrapped scrolling option in `More Options`	`string`	Wrapped Scrolling
wrappedScrollingTooltip	Tooltip text of the wrapped scrolling option	`string`	Enable wrapped scrolling
zoomActualSize	Label of the actual zoom option of the zoom menu select	`string`	Actual size
zoomInTooltip	Tooltip text of the zoom in button	`string`	Zoom in
zoomOutTooltip	Tooltip text of the zoom out button	`string`	Zoom out
zoomPageFit	Label of the page fit zoom option of the zoom menu select	`string`	Page fit
zoomPageWidth	Label of the page width zoom option of the zoom menu select	`string`	Page width
zoomSelectTooltip	Tooltip text of the selector between zoom buttons	`string`	Select zoom level

Here is an example on how to replace the existing localization

Composition TSComposition JSOptions TSOptions JS

vue

<script setup lang="ts">
import { ref } from 'vue';
import { VPdfViewer, Locales } from "@vue-pdf-viewer/viewer";
const pdfFileSource =
  "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
const locale = ref("en_US");

const localization = {
  it_IT: Locales.it_IT,
  en_US: { ...Locales.en_US, searchButtonTooltip: "Click here to open search" },
};

const switchLanguage = () => {
  const prevLocale = locale.value;
  locale.value = prevLocale === "en_US" ? "it_IT" : "en_US";
};
</script>
<template>
  <button @click="switchLanguage">Switch Language</button>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      :src="pdfFileSource"
      :localization="localization"
      :locale="locale"
    />
  </div>
</template>

vue

<script setup>
import { VPdfViewer, Locales } from "@vue-pdf-viewer/viewer";
const pdfFileSource =
  "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
const locale = ref("en_US");

const localization = {
  it_IT: Locales.it_IT,
  en_US: { ...Locales.en_US, searchButtonTooltip: "Click here to open search" },
};
const switchLanguage = () => {
  const prevLocale = locale.value;
  locale.value = prevLocale === "en_US" ? "it_IT" : "en_US";
};
</script>
<template>
  <button @click="switchLanguage">Switch Language</button>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      :src="pdfFileSource"
      :localization="localization"
      :locale="locale"
    />
  </div>
</template>

vue

<script lang="ts">
import { VPdfViewer, Locales } from "@vue-pdf-viewer/viewer";

export default {
  components: { VPdfViewer },
  data() {
    return {
      toolbarOptions: {
        searchable: false,
        pdfFileSource:
          "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
      },
      locale: "en_US",
      localization: {
        it_IT: Locales.it_IT,
        en_US: {
          ...Locales.en_US,
          searchButtonTooltip: "Click here to open search",
        },
      },
    };
  },
  methods: {
    switchLanguage() {
      const prevLocale = this.locale;
      this.locale = prevLocale === "en_US" ? "it_IT" : "en_US";
    },
  },
};
</script>
<template>
  <div>
    <button @click="switchLanguage">Switch Language</button>
    <div :style="{ width: '1028px', height: '700px' }">
      <VPdfViewer
        :src="pdfFileSource"
        :localization="localization"
        :locale="locale"
      />
    </div>
  </div>
</template>

vue

<script>
import { VPdfViewer, Locales } from "@vue-pdf-viewer/viewer";

export default {
  components: { VPdfViewer },
  data() {
    return {
      toolbarOptions: {
        searchable: false,
        pdfFileSource:
          "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
      },
      locale: "en_US",
      localization: {
        it_IT: Locales.it_IT,
        en_US: {
          ...Locales.en_US,
          searchButtonTooltip: "Click here to open search",
        },
      },
    };
  },
  methods: {
    switchLanguage() {
      const prevLocale = this.locale;
      this.locale = prevLocale === "en_US" ? "it_IT" : "en_US";
    },
  },
};
</script>
<template>
  <div>
    <button @click="switchLanguage">Switch Language</button>
    <div :style="{ width: '1028px', height: '700px' }">
      <VPdfViewer
        :src="pdfFileSource"
        :localization="localization"
        :locale="locale"
      />
    </div>
  </div>
</template>

If you would like to add a custom language instead, follow here for our Adding a Custom Localization tutorial.

Remark: If you would like to request another built-in language, please submit a request on GitHub.

ScrollMode

The ScrollMode enumeration is used to define how pages will be scrolled in the viewer. This is configured via the initialScrollMode prop:

ScrollMode.Horizontal: Pages are scrolled horizontally. This mode is compatible with ViewMode.SinglePage only.
ScrollMode.Page: Displays one page at a time, enabling users to scroll through individual pages.
ScrollMode.Vertical : Pages are scrolled vertically, displaying multiple pages stacked on top of each other.
ScrollMode.Wrapped : Pages are wrapped, allowing multiple pages to be visible in a grid-like structure while scrolling.

ToolbarOptions

The toolbar consists of top bar and left sidebar. The tools are icons located on the Vue PDF Viewer's toolbar.

Key	Description	Type
commentPanelEnabled	Determine whether the toolbar will show the icon of the comment panel icon	`boolean`
docPropertiesEnabled	Determine whether the toolbar will show the icon of the document properties icon Remark: This icon is part of `More Options` icon.	`boolean`
downloadable	Specify whether the toolbar will show the download icon	`boolean`
fullscreen	Indicate whether the toolbar will show the fullscreen icon	`boolean`
jumpNavigatable	Determine whether the toolbar will show the first page & last page assets Remark: This icon is part of `More Options` icon.	`boolean`
pointerSwitchable	Determine whether the toolbar will show the selection mode assets Remark: This icon is part of `More Options` icon.	`boolean`
navigatable	Indicate whether the toolbar will show the navigation assets	`boolean`
newFileOpenable	Indicate whether the toolbar will show the icon to open local file, including the drag-and-drop zone	`boolean`
pageViewSwitchable	Indicate whether the toolbar will show view modes (i.e. single and dual) Remark: This icon is part of `More Options` icon.	`boolean`
printable	Determine whether the toolbar will show the print icon	`boolean`
rotatable	Specify whether the toolbar will show the rotation assets Remark: This icon is part of `More Options` icon.	`boolean`
scrollingSwitchable	Indicate whether the toolbar will show scroll modes (i.e. page, vertical, horizontal and wrapped) Remark: This icon is part of `More Options` icon.	`boolean`
searchable	Determine whether the toolbar will show the search icon Remark: The `text-layer` property must be `true`.	`boolean`
sidebarEnable	Determine whether the toolbar will show the sidebar	`boolean`
themeSwitchable	Specify whether the toolbar will show the icon to switch theme Remark: `themeSwitchable` may be used together with `is-dark` prop and `@dark-mode-changed` emit event.	`boolean`
thumbnailViewable	Indicate whether the toolbar will show the thumbnail icon	`boolean`
zoomable	Specify whether the toolbar will show the zoom assets	`boolean`

Remark: The toolbar will show all options by default since each key's value is set to true.

docPropertiesEnabled, jumpNavigatable, pageViewSwitchable, pointerSwitchable, rotatable and scrollingSwitchable are grouped within ... icon (More Options). There are two conditions to hide More Options:

Set false on the 6 keys mentioned above - This will hide More Options on the desktop view;
Repeat step 1 and set false on downloadable, fullscreen, newFileOpenable and printable - This will hide More Options on the mobile view.

Here is an example of how to disable the search icon on the toolbar

Composition TSComposition JSOptions TSOptions JS

vue

<script setup lang="ts">
import { VPdfViewer, type ToolbarOptions } from "@vue-pdf-viewer/viewer";

const toolbarOptions: Partial<ToolbarOptions> = {
  searchable: false,
};
const pdfFileSource =
  "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource" :toolbarOptions="toolbarOptions" />
  </div>
</template>

vue

<script setup>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";

const toolbarOptions = {
  searchable: false,
};
const pdfFileSource =
  "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource" :toolbarOptions="toolbarOptions" />
  </div>
</template>

vue

<script lang="ts">
import { defineComponent } from "vue";
import { VPdfViewer } from "@vue-pdf-viewer/viewer";

export default defineComponent({
  components: { VPdfViewer },
  data() {
    return {
      toolbarOptions: { searchable: false },
      pdfFileSource:
        "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
    };
  },
});
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource" :toolbarOptions="toolbarOptions" />
  </div>
</template>

vue

<script>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";

export default {
  components: { VPdfViewer },
  data() {
    return {
      toolbarOptions: {
        searchable: false,
        pdfFileSource:
          "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
      },
    };
  },
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource" :toolbarOptions="toolbarOptions" />
  </div>
</template>

ViewMode

The ViewMode enumeration defines how pages are visually laid out in the viewer. This is configured using the initialViewMode prop.

Enum Definition

export enum ViewMode {
  SinglePage = 'Single',
  DualPage = 'Dual',
  DualPageWithCover = 'DualWithCover'
}

ViewMode.SinglePage: Display a single page in each row, making it easy to focus on one page at a time.
ViewMode.DualPage: Display two pages side-by-side, ideal for viewing documents that are meant to be read in pairs.
ViewMode.DualPageWithCover: Display a single page in each row except first page.

ZoomLevel

The ZoomLevel enumeration defines how pages will be scaled in the viewer. This is configured via the initialScale prop.

Enum Definition

export enum ZoomLevel {
  ActualSize = 'actualSize',
  PageFit = 'pageFit',
  PageWidth = 'pageWidth'
}

ZoomLevel.ActualSize: Pages are rendered at their actual PDF size.
ZoomLevel.PageFit: Pages are scaled to fit within the viewer's width and height.
ZoomLevel.PageWidth: Pages are scaled to fit the viewer's width.

For initialScale, you can also provide a numeric value between 0.1 and 5.0 to set a specific zoom level, where 1.0 represents 100% zoom.

Events

Slots

Slots - Tools

Interfaces

CanvasLoadedCallback

ViewportDimensions

Example

CharacterMap

Localization

ScrollMode

ToolbarOptions

ViewMode

Enum Definition

ZoomLevel

Enum Definition

Slots - Tools

Interfaces ​

CanvasLoadedCallback ​

ViewportDimensions ​

Example ​

CharacterMap ​

Localization ​

ScrollMode ​

ToolbarOptions ​

ViewMode ​

Enum Definition ​

ZoomLevel ​

Enum Definition ​

Interfaces

CanvasLoadedCallback

ViewportDimensions

Example

CharacterMap

Localization

ScrollMode

ToolbarOptions

ViewMode

Enum Definition

ZoomLevel

Enum Definition