Component API

Props

Name	Description	Type	Default
characterMap	Specify the character map (CMap) to be used for text rendering.	CharacterMap	undefined
darkMode	To set dark theme for the VPV. This can be used with the @update:dark-mode event.	v-model:boolean	false
initialPage	The page number of the PDF document that will be displayed on first load.	number	1
initialRotation	The initial rotation of the PDF document with respect to the VPV viewer.	number	0 (0, 90, 180, 270)
initialScale	The initial zoom level of the PDF document with respect to VPV. If unspecified, it is determined by the page dimensions and the width of the container.	number	ZoomLevel.PageFit (Scale ranges from 0 to 1.)
initialScrollMode beta	The initial scroll mode of VPV	ScrollMode	ScrollMode.Vertical
initialThumbnailsVisible	To display thumbnail on first load	boolean	false
initialViewMode beta	The initial view mode of VPV	ViewMode	ViewMode.SinglePage
src	Source of the PDF document	string, Ref<string>	-
textLayer	A layer on a PDF to allow users to select text Remark: Search, highlight text, and selection mode features depend on this property. If you disable it, these features won't work.	boolean	true
toolbarOptions	Determine whether the toolbar is visible in the VPV. Remark: The toolbar consists of top bar and left sidebar	Partial<ToolbarOptions> \	false | ToolbarOptions, If false, the toolbar will not show.
workerUrl	The URL or relative path pointing to the web worker file for handling PDF document which must correspond to the pdfjs-dist version being used. Normally, you will not need to configure the workerURL. To do so, please refer to the advanced configuration	string	-
locale	The locale string key, which must match the key of the localization object; otherwise, it will fall back to en_US	v-model:string	en_US
localization	The locale object that will be used in the component	Record<string, Localization>	{ en_US: ...locale, zh_CN: ...locale, it_IT: ...locale, pt_PT: ...locale, th_TH: ...locale }

Events

Event	Description	Argument type
loadProgress	Emit the percentage of the PDF file loaded	number
loaded	Emit when the PDF has finished loading	-
rotate	Emit when the PDF is rotated to a certain direction	RotateEvent
update:darkMode	Emit when the appearance mode changes to or from dark mode. More Info	boolean

loadProgress

Argument	Description
fn(value: number)	Indicate the loading percentage

Example

Composition TS

<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";
const onLoadProgress = (progress: number) => {
  // Do something with the loading progress percentage
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource" @loadProgress="onLoadProgress" />
  </div>
</template>

Composition JS

<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 onLoadProgress = (progress) => {
  // Do something with the loading progress percentage
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource" @loadProgress="onLoadProgress" />
  </div>
</template>

Options TS

<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",
    };
  },
  methods: {
    onLoadProgress(progress) {
      // Do something with the loading progress percentage
    },
  },
});
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource" @loadProgress="onLoadProgress" />
  </div>
</template>

Options JS

<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",
    };
  },
  methods: {
    onLoadProgress(progress) {
      // Do something with the loading progress percentage
    },
  },
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource" @loadProgress="onLoadProgress" />
  </div>
</template>

loaded

Example

Composition TS

<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";
const onLoaded = () => {
  // PDF is already loaded
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource" @loaded="onLoaded" />
  </div>
</template>

Composition JS

<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 onLoaded = () => {
  // PDF is already loaded
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource" @loaded="onLoaded" />
  </div>
</template>

Options TS

<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",
    };
  },
  methods: {
    onLoaded() {
      // PDF is already loaded
    },
  },
});
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource" @loaded="onLoaded" />
  </div>
</template>

Options JS

<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",
    };
  },
  methods: {
    onLoaded() {
      // PDF is already loaded
    },
  },
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource" @loaded="onLoaded" />
  </div>
</template>

rotate

Argument	Description
fn(value: RotateEvent)	Indicate the rotation value

RotateEvent

Key	Description	Type
direction	Latest rotation direction	`'clockwise' \	'counterclockwise'`
rotate	Latest rotation number	number

Example

Composition TS

<script setup lang="ts">
import { VPdfViewer, type RotateEvent } from "@vue-pdf-viewer/viewer";
const pdfFileSource =
  "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
const onRotated = (value: RotateEvent) => {
  // Do something with the rotate event callback
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource" @rotate="onRotated" />
  </div>
</template>

Composition JS

<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 onRotated = (value) => {
  // Do something with the rotate event callback
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource" @rotate="onRotate" />
  </div>
</template>

Options TS

<script lang="ts">
import { defineComponent } from "vue";
import { VPdfViewer, type RotateEvent } 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",
    };
  },
  methods: {
    onRotated(value) {
      // Do something with the rotate event callback
    },
  },
});
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource" @rotate="onRotate" />
  </div>
</template>

Options JS

<script>
import { VPdfViewer, type RotateEvent } 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"
    }
  },
  methods: {
    onRotated(value) {
  // Do something with the rotate event callback
    }
  }
}
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource" @rotate="onRotate" />
  </div>
</template>

update:darkMode

Argument	Description
fn(value: boolean)	Indicate that the current appearance is True if in dark mode

Example

Composition TS

<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";
const onDarkModeChange = (isDark: boolean) => {
  // Do something with the current appearance mode
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource" @update:darkMode="onDarkModeChange" />
  </div>
</template>

Composition JS

<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 onDarkModeChange = (isDark) => {
  // Do something with the current appearance mode
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource" @update:darkMode="onDarkModeChange" />
  </div>
</template>

Options TS

<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",
    };
  },
  methods: {
    onDarkModeChange(isDark) {
      // Do something with the current appearance mode
    },
  },
});
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource" @update:darkMode="onDarkModeChange" />
  </div>
</template>

Options JS

<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",
    };
  },
  methods: {
    onDarkModeChange(isDark) {
      // Do something with the current appearance mode
    },
  },
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource" @update:darkMode="onDarkModeChange" />
  </div>
</template>

Slots

VPV provides slots for customizing all tools in the toolbar, allowing you to override the default UI elements. Each tool has a slot with a prefix icon, making it easy to change any icons in the toolbar.

Slots - Icons

Name	Description
iconThumbnail	To change the thumbnail icon
iconSearch	To change the search icon
iconPrevPage	To change the previous page icon
iconNextPage	To change the next page icon
iconZoomOut	To change the zoom-out icon
iconZoomIn	To change the zoom-in icon
iconThemeDark	To change the dark mode icon when the current state is light
iconThemeLight	To change the light mode icon when the current state is dark
iconOpenFile	To change the open local file icon
iconDownload	To change the download icon
iconPrint	To change the print icon
iconFullScreen	To change the full screen icon
iconMoreOptions	To change the more option menu icon
iconFirstPage	To change the first page icon
iconLastPage	To change the last page icon
iconRotateClockwise	To change the rotate clockwise icon
iconRotateCounterClockwise	To change the rotate counterclockwise icon
iconTextSelection	To change the text selection mode icon
iconHandMode	To change the hand mode icon
iconScrollingPage	To change the page scrolling icon
iconScrollingVertical	To change the vertical scrolling icon
iconScrollingHorizontal	To change the horizontal scrolling icon
iconScrollingWrapped	To change the wrapped scrolling icon
iconPageViewSingle	To change the single page view icon
iconPageViewDual	To change the dual page view icon
iconDocProperties	To change the document properties icon

Example

Composition TS

<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">
      <template #iconPrint>
        <span>P</span>
      </template>
    </VPdfViewer>
  </div>
</template>

Composition JS

<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">
      <template #iconPrint>
        <span>P</span>
      </template>
    </VPdfViewer>
  </div>
</template>

Options TS

<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">
      <template #iconPrint>
        <span>P</span>
      </template>
    </VPdfViewer>
  </div>
</template>

Options JS

<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">
      <template #iconPrint>
        <span>P</span>
      </template>
    </VPdfViewer>
  </div>
</template>

Slots - Tools

Name	Description
dropFileZone	To change the style of the drop file zone
downloadTool	To override the icon or download flow
fullScreenTool	To override the icon or full screen flow
loader	To replace the default loader
loaderImage	To replace the default loader image
loaderProgress	To show or adjust the progress percentage which is below the loader image
openFileTool	To override the icon or open file flow
pageNavigationTool	To customize the display of the navigation UI
printTool	To override the icon or print flow
thumbnailTool	To override the icon or thumbnail flow
themeTool	To change the light and dark icons
zoomTool	To customize the display of the zoom UI

dropFileZone

Example

Composition TS

<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">
      <template #dropFileZone> Drop file here </template>
    </VPdfViewer>
  </div>
</template>

Composition JS

<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">
      <template #dropFileZone> Drop file here </template>
    </VPdfViewer>
  </div>
</template>

Options TS

<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">
      <template #dropFileZone> Drop file here </template>
    </VPdfViewer>
  </div>
</template>

Options JS

<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">
      <template #dropFileZone> Drop file here </template>
    </VPdfViewer>
  </div>
</template>

downloadTool

Prop	Description	Type
onClick	Download file function handler	() => void

Example

Composition TS

<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">
      <template #downloadTool="{ onClick }">
        <button @click="onClick">download</button>
      </template>
    </VPdfViewer>
  </div>
</template>

Composition JS

<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">
      <template #downloadTool="{ onClick }">
        <button @click="onClick">download</button>
      </template>
    </VPdfViewer>
  </div>
</template>

Options TS

<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">
      <template #downloadTool="{ onClick }">
        <button @click="onClick">download</button>
      </template>
    </VPdfViewer>
  </div>
</template>

Options JS

<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">
      <template #downloadTool="{ onClick }">
        <button @click="onClick">download</button>
      </template>
    </VPdfViewer>
  </div>
</template>

fullScreenTool

Prop	Description	Type
isSupported	Indicate whether the browser's full screen mode is supported	boolean
onClick	Full screen function handler	() => void

Example

Composition TS

<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">
      <template #fullScreenTool="{ onClick, isSupported }">
        <button @click="onClick" :disabled="!isSupported">full screen</button>
      </template>
    </VPdfViewer>
  </div>
</template>

Composition JS

<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">
      <template #fullScreenTool="{ onClick, isSupported }">
        <button @click="onClick" :disabled="!isSupported">full screen</button>
      </template>
    </VPdfViewer>
  </div>
</template>

Options TS

<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">
      <template #fullScreenTool="{ onClick, isSupported }">
        <button @click="onClick" :disabled="!isSupported">full screen</button>
      </template>
    </VPdfViewer>
  </div>
</template>

Options JS

<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">
      <template #fullScreenTool="{ onClick, isSupported }">
        <button @click="onClick" :disabled="!isSupported">full screen</button>
      </template>
    </VPdfViewer>
  </div>
</template>

loader

Prop	Description	Type
progress	State of loading progress in percentage	number
loaded	Return true when the PDF has finished loading	boolean

Example

Composition TS

<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">
      <template #loader="{ progress, loaded }">
        <div v-if="!loaded" class="loader-wrapper">
          <img src="/your-loader.gif" />
        </div>
      </template>
    </VPdfViewer>
  </div>
</template>
<style scoped>
.loader-wrapper {
  position: absolute;
  z-index: 12;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(251 191 36 / 0.75);
}
</style>

Composition JS

<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">
      <template #loader="{ progress, loaded }">
        <div v-if="!loaded" class="loader-wrapper">
          <img src="/your-loader.gif" />
        </div>
      </template>
    </VPdfViewer>
  </div>
</template>
<style scoped>
.loader-wrapper {
  position: absolute;
  z-index: 12;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(251 191 36 / 0.75);
}
</style>

Options TS

<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">
      <template #loader="{ progress, loaded }">
        <div v-if="!loaded" class="loader-wrapper">
          <img src="/your-loader.gif" />
        </div>
      </template>
    </VPdfViewer>
  </div>
</template>
<style scoped>
.loader-wrapper {
  position: absolute;
  z-index: 12;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(251 191 36 / 0.75);
}
</style>

Options JS

<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">
      <template #loader="{ progress, loaded }">
        <div v-if="!loaded" class="loader-wrapper">
          <img src="/your-loader.gif" />
        </div>
      </template>
    </VPdfViewer>
  </div>
</template>
<style scoped>
.loader-wrapper {
  position: absolute;
  z-index: 12;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(251 191 36 / 0.75);
}
</style>

loaderImage

Example

Composition TS

<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">
      <template #loaderImage>
        <img src="/your-spin-image.png" width="80" height="80" />
      </template>
    </VPdfViewer>
  </div>
</template>

Composition JS

<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">
      <template #loaderImage>
        <img src="/your-spin-image.png" width="80" height="80" />
      </template>
    </VPdfViewer>
  </div>
</template>

Options TS

<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">
      <template #loaderImage>
        <img src="/your-spin-image.png" width="80" height="80" />
      </template>
    </VPdfViewer>
  </div>
</template>

Options JS

<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">
      <template #loaderImage>
        <img src="/your-spin-image.png" width="80" height="80" />
      </template>
    </VPdfViewer>
  </div>
</template>

loaderProgress

Prop	Description	Type
progress	State of loading progress in percentage	number

Example

Composition TS

<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">
      <template #loaderProgress="{ progress }">
        <p class="m-0">
          <strong>{{ progress }}</strong>
        </p>
      </template>
    </VPdfViewer>
  </div>
</template>

Composition JS

<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">
      <template #loaderProgress="{ progress }">
        <p class="m-0">
          <strong>{{ progress }}</strong>
        </p>
      </template>
    </VPdfViewer>
  </div>
</template>

Options TS

<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">
      <template #loaderProgress="{ progress }">
        <p class="m-0">
          <strong>{{ progress }}</strong>
        </p>
      </template>
    </VPdfViewer>
  </div>
</template>

Options JS

<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">
      <template #loaderProgress="{ progress }">
        <p class="m-0">
          <strong>{{ progress }}</strong>
        </p>
      </template>
    </VPdfViewer>
  </div>
</template>

openFileTool

Prop	Description	Type
onClick	Open file function handler	() => void

Example

Composition TS

<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">
      <template #openFileTool="{ onClick }">
        <button @click="onClick">open local file</button>
      </template>
    </VPdfViewer>
  </div>
</template>

Composition JS

<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">
      <template #openFileTool="{ onClick }">
        <button @click="onClick">open local file</button>
      </template>
    </VPdfViewer>
  </div>
</template>

Options TS

<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">
      <template #openFileTool="{ onClick }">
        <button @click="onClick">open local file</button>
      </template>
    </VPdfViewer>
  </div>
</template>

Options JS

<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">
      <template #openFileTool="{ onClick }">
        <button @click="onClick">open local file</button>
      </template>
    </VPdfViewer>
  </div>
</template>

pageNavigationTool

Prop	Description	Type
total	Total page count of the PDF document	number
current	Current page number	number
onNext	Next page function handler	() => void
onPrev	Previous page function handler	() => void
onChangePage	Page change function handler	(page: number) => void

Example

Composition TS

<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";
const handlePageEntered = (
  e: Event,
  changePage: (pageNumber: number) => void,
) => {
  const value = (e.target as HTMLInputElement).value;
  changePage(+value);
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource">
      <template
        #pageNavigationTool="{ total, current, onNext, onPrev, onChangePage }"
      >
        <input
          :value="current"
          @keyup.enter="handlePageEntered($event, onChangePage)"
        />/{{ total }}
        <button @click="onPrev">Previous</button>
        <button @click="onNext">Next</button>
      </template>
    </VPdfViewer>
  </div>
</template>

Composition JS

<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 handlePageEntered = (e, changePage) => {
  const value = e.target.value;
  changePage(+value);
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource">
      <template
        #pageNavigationTool="{ total, current, onNext, onPrev, onChangePage }"
      >
        <input
          :value="current"
          @keyup.enter="handlePageEntered($event, onChangePage)"
        />/{{ total }}
        <button @click="onPrev">Previous</button>
        <button @click="onNext">Next</button>
      </template>
    </VPdfViewer>
  </div>
</template>

Options TS

<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",
    };
  },
  methods: {
    handlePageEntered(e, changePage) {
      const value = e.target.value;
      changePage(+value);
    },
  },
});
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource">
      <template
        #pageNavigationTool="{ total, current, onNext, onPrev, onChangePage }"
      >
        <input
          :value="current"
          @keyup.enter="handlePageEntered($event, onChangePage)"
        />/{{ total }}
        <button @click="onPrev">Previous</button>
        <button @click="onNext">Next</button>
      </template>
    </VPdfViewer>
  </div>
</template>

Options JS

<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",
    };
  },
  methods: {
    handlePageEntered(e, changePage) {
      const value = e.target.value;
      changePage(+value);
    },
  },
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource">
      <template
        #pageNavigationTool="{ total, current, onNext, onPrev, onChangePage }"
      >
        <input
          :value="current"
          @keyup.enter="handlePageEntered($event, onChangePage)"
        />/{{ total }}
        <button @click="onPrev">Previous</button>
        <button @click="onNext">Next</button>
      </template>
    </VPdfViewer>
  </div>
</template>

printTool

Prop	Description	Type
onClick	Print PDF function handler	() => void

Composition TS

<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">
      <template #printTool="{ onClick }">
        <button @click="onClick">Print</button>
      </template>
    </VPdfViewer>
  </div>
</template>

Composition JS

<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">
      <template #printTool="{ onClick }">
        <button @click="onClick">Print</button>
      </template>
    </VPdfViewer>
  </div>
</template>

Options TS

<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">
      <template #printTool="{ onClick }">
        <button @click="onClick">Print</button>
      </template>
    </VPdfViewer>
  </div>
</template>

Options JS

<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">
      <template #printTool="{ onClick }">
        <button @click="onClick">Print</button>
      </template>
    </VPdfViewer>
  </div>
</template>

themeTool

Prop	Description	Type
isDark	State of the browser preference mode	boolean
onClick	Function to switch the VPV's appearence	boolean

Example

Composition TS

<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">
      <template #themeTool="{ isDark, onClick }">
        <button @click="onClick">
          <span v-if="isDark">Day</span>
          <span v-else>Night</span>
        </button>
      </template>
    </VPdfViewer>
  </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">
      <template #themeTool="{ isDark, onClick }">
        <button @click="onClick">
          <span v-if="isDark">Day</span>
          <span v-else>Night</span>
        </button>
      </template>
    </VPdfViewer>
  </div>
</template>

Options TS

<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">
      <template #themeTool="{ isDark, onClick }">
        <button @click="onClick">
          <span v-if="isDark">Day</span>
          <span v-else>Night</span>
        </button>
      </template>
    </VPdfViewer>
  </div>
</template>

Options JS

<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">
      <template #themeTool="{ isDark, onClick }">
        <button @click="onClick">
          <span v-if="isDark">Day</span>
          <span v-else>Night</span>
        </button>
      </template>
    </VPdfViewer>
  </div>
</template>

thumbnailTool

Prop	Description	Type
onToggle	Function to toggle the visibility of the thumbnail sidebar	() => void

Example

Composition TS

<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">
      <template #thumbnailTool="{ onToggle }">
        <button @click="onToggle">T</button>
      </template>
    </VPdfViewer>
  </div>
</template>

Composition JS

<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">
      <template #thumbnailTool="{ onToggle }">
        <button @click="onToggle">T</button>
      </template>
    </VPdfViewer>
  </div>
</template>

Options TS

<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">
      <template #thumbnailTool="{ onToggle }">
        <button @click="onToggle">T</button>
      </template>
    </VPdfViewer>
  </div>
</template>

Options JS

<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">
      <template #thumbnailTool="{ onToggle }">
        <button @click="onToggle">T</button>
      </template>
    </VPdfViewer>
  </div>
</template>

zoomTool

Prop	Description	Type
currentScale	Current scale of the Vue PDF Viewer	number
zoom	Zoom function	(nextScale: number) => void

Example

Composition TS

<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">
      <template #zoomTool="{ currentScale, zoom }">
        <button @click="zoom(currentScale - 2)">ZoomOut</button>
        <strong>{{ currentScale }}</strong>
        <button @click="zoom(currentScale + 5)">ZoomIn</button>
      </template>
    </VPdfViewer>
  </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">
      <template #zoomTool="{ currentScale, zoom }">
        <button @click="zoom(currentScale - 2)">ZoomOut</button>
        <strong>{{ currentScale }}</strong>
        <button @click="zoom(currentScale + 5)">ZoomIn</button>
      </template>
    </VPdfViewer>
  </div>
</template>

Options TS

<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">
      <template #zoomTool="{ currentScale, zoom }">
        <button @click="zoom(currentScale - 2)">ZoomOut</button>
        <strong>{{ currentScale }}</strong>
        <button @click="zoom(currentScale + 5)">ZoomIn</button>
      </template>
    </VPdfViewer>
  </div>
</template>

Options JS

<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">
      <template #zoomTool="{ currentScale, zoom }">
        <button @click="zoom(currentScale - 2)">ZoomOut</button>
        <strong>{{ currentScale }}</strong>
        <button @click="zoom(currentScale + 5)">ZoomIn</button>
      </template>
    </VPdfViewer>
  </div>
</template>

Interfaces

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 TS

<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/[email protected]/cmaps/',
        isCompressed: true,
      }"
    />
  </div>
</template>

Composition JS

<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/[email protected]/cmaps/',
        isCompressed: true,
      }"
    />
  </div>
</template>

Options TS

<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/[email protected]/cmaps/',
        isCompressed: true,
      }"
    />
  </div>
</template>

Options JS

<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/[email protected]/cmaps/',
        isCompressed: true,
      }"
    />
  </div>
</template>

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

Composition TS

<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>

Composition JS

<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>

Options TS

<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>

Options JS

<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>

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
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
printable	Determine whether the toolbar will show the print icon	boolean
rotatable	Specify whether whether the toolbar will show the rotation assets 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: themeSwtichable 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, pointerSwitchable and rotatable are grouped within ... icon (More Options). There are two conditions to hide More Options:

1. Set false on the 4 keys mentioned above - This will hide More Options on the desktop view;
2. 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 TS

<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>

Composition JS

<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>

Options TS

<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>

Options JS

<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>

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, VPV provide 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 keys you can localize:

Key	Description	Type	Default (en_US)
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
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
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
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
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
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
propertiesPageCountLabel	Label of the page count in document properties modal	string	Page count
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
searchNextTooltip	Tooltip text of the next search match icon	string	Next match
searchPrevTooltip	Tooltip text of the previous search match icon	string	Previous match
singlePageLabel	Label of the single page panel option in More Options	string	Single Page
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
wrappedScrollingLabel	Label of the wrapped scrolling option in More Options	string	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 TS

<script setup lang="ts">
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>

Composition JS

<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>

Options TS

<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>

Composition JS

<script setup>
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 wish to add a custom language, please do so by using the locale and localization props in the component:

<VPdfViewer locale="customLang" :localization="{ customLang: { .... } }" />

It's important to note that the locale string must match the key in the localization object. Otherwise, it will fall back to en_US.

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

ScrollMode

Currently available in the beta version.

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.

ViewMode

Currently available in the beta version.

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

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