Slots

Vue PDF Viewer 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
iconCommentPanel	To change the comment panel icon
iconDocProperties	To change the document properties icon
iconDownload	To change the download icon
iconFirstPage	To change the first page icon
iconFullScreen	To change the full screen icon
iconHandMode	To change the hand mode icon
iconLastPage	To change the last page icon
iconMoreOptions	To change the more option menu icon
iconNextPage	To change the next page icon
iconOpenFile	To change the open local file icon
iconPageViewDual	To change the dual page view icon
iconPageViewDualWithCover	To change the dual page view with cover icon
iconPageViewSingle	To change the single page view icon
iconPrevPage	To change the previous page icon
iconPrint	To change the print icon
iconRotateClockwise	To change the rotate clockwise icon
iconRotateCounterClockwise	To change the rotate counterclockwise icon
iconScrollingHorizontal	To change the horizontal scrolling icon
iconScrollingPage	To change the page scrolling icon
iconScrollingVertical	To change the vertical scrolling icon
iconScrollingWrapped	To change the wrapped scrolling icon
iconSearch	To change the search icon
iconTextSelection	To change the text selection mode 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
iconThumbnail	To change the thumbnail icon
iconZoomIn	To change the zoom-in icon
iconZoomOut	To change the zoom-out 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 - Pages

pageOverlay >=3.4.0

The pageOverlay slot allows you to render custom content on top of each PDF page. This is useful for adding overlays, watermarks, or interactive elements that need to be positioned on specific pages.

INFO

This slot is only available for Organization license users.

Prop	Description	Type
pageElement	The HTML element container of the PDF page	HTMLElement
pageIndex	Zero-based index of the current page	number
scale	Current scale/zoom level of the page from viewport	number

Example

Composition TS

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

const pdfFileSource =
  "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";

// Helper function to calculate responsive styles based on scale
const getOverlayStyle = (scale: number) => {
  return {
    fontSize: `${14 * scale}px`,
    padding: `${8 * scale}px ${12 * scale}px`,
    top: `${10 * scale}px`,
    right: `${10 * scale}px`,
  };
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource">
      <template #pageOverlay="{ pageIndex, scale }">
        <div class="custom-overlay" :style="getOverlayStyle(scale)">
          Page {{ pageIndex + 1 }}
        </div>
      </template>
    </VPdfViewer>
  </div>
</template>
<style scoped>
.custom-overlay {
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 4px;
  pointer-events: auto;
  transition: all 0.2s ease;
}
</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";

// Helper function to calculate responsive styles based on scale
const getOverlayStyle = (scale) => {
  return {
    fontSize: `${14 * scale}px`,
    padding: `${8 * scale}px ${12 * scale}px`,
    top: `${10 * scale}px`,
    right: `${10 * scale}px`,
  };
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource">
      <template #pageOverlay="{ pageIndex, scale }">
        <div class="custom-overlay" :style="getOverlayStyle(scale)">
          Page {{ pageIndex + 1 }}
        </div>
      </template>
    </VPdfViewer>
  </div>
</template>
<style scoped>
.custom-overlay {
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 4px;
  pointer-events: auto;
  transition: all 0.2s ease;
}
</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",
    };
  },
  methods: {
    // Helper method to calculate responsive styles based on scale
    getOverlayStyle(scale: number) {
      return {
        fontSize: `${14 * scale}px`,
        padding: `${8 * scale}px ${12 * scale}px`,
        top: `${10 * scale}px`,
        right: `${10 * scale}px`,
      };
    },
  },
});
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource">
      <template #pageOverlay="{ pageIndex, scale }">
        <div class="custom-overlay" :style="getOverlayStyle(scale)">
          Page {{ pageIndex + 1 }}
        </div>
      </template>
    </VPdfViewer>
  </div>
</template>
<style scoped>
.custom-overlay {
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 4px;
  pointer-events: auto;
  transition: all 0.2s ease;
}
</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",
    };
  },
  methods: {
    // Helper method to calculate responsive styles based on scale
    getOverlayStyle(scale) {
      return {
        fontSize: `${14 * scale}px`,
        padding: `${8 * scale}px ${12 * scale}px`,
        top: `${10 * scale}px`,
        right: `${10 * scale}px`,
      };
    },
  },
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource">
      <template #pageOverlay="{ pageIndex, scale }">
        <div class="custom-overlay" :style="getOverlayStyle(scale)">
          Page {{ pageIndex + 1 }}
        </div>
      </template>
    </VPdfViewer>
  </div>
</template>
<style scoped>
.custom-overlay {
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 4px;
  pointer-events: auto;
  transition: all 0.2s ease;
}
</style>

TIP

Scaling Strategies:

1. JavaScript-based scaling (shown in examples above): Multiply your base values by the scale prop for precise control over font-size, padding, and positioning.

2. CSS variable approach: Use the --scale-factor CSS variable for automatic scaling calculations:

.custom-element {
  font-size: calc(14px * var(--scale-factor));
  width: calc(100px * var(--scale-factor));
}

Pointer Events: The overlay container has pointer-events: none by default, allowing clicks to pass through to the PDF. Add pointer-events: auto to your custom elements if you need them to be interactive.

Practical Tutorials

For real-world implementations of the pageOverlay slot, check out these tutorials:

• Adding Page Watermarks - Learn how to add a custom watermark to your PDF pages
• Highlight with Bbox Coordinates Programmatically - Implement interactive bounding boxes on PDF pages

Slots - Tools

Name	Description
commentPanelTool	To override the icon or comment panel flow
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

commentPanelTool

Prop	Description	Type
onClick	Comment panel tool 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 #commentPanelTool="{ onClick }">
        <button @click="onClick">Comment Panel Tool</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 #commentPanelTool="{ onClick }">
        <button @click="onClick">Comment Panel Tool</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 #commentPanelTool="{ onClick }">
        <button @click="onClick">Comment Panel Tool</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 #commentPanelTool="{ onClick }">
        <button @click="onClick">Comment Panel Tool</button>
      </template>
    </VPdfViewer>
  </div>
</template>

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

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

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