Events

---

Event	Description	Argument type
loaded	Emit when the PDF has finished loading	-
loadProgress	Emit the percentage of the PDF file loaded	number
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

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>

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>

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>