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