Troubleshooting

1. Handling of appearance on browser

The Vue PDF Viewer's appearance is designed to be independent from a parent application's appearance.

The library provides the darkMode property as a two-way binding, using the v-model property. There is an @update:darkMode event for emitting theme changes from the library, allowing developers to update the parent application's appearance accordingly.

Composition TS

<script setup lang="ts">
  import { VPdfViewer } from '@vue-pdf-viewer/viewer'
  const src = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  const isDark = ref(true)
  const handleDarkModeChanged = (dark: boolean) => {
    isDark.value = dark
    // TODO: your logic
  }
</script>
<template>
  <!-- Using v-model as two-way binding -->
  <div :style="{ width: '1028px', height: '700px'}">
    <VPdfViewer
      :src="src"
      v-model:darkMode="isDark"
    />
  </div>
  <!-- without v-model -->
  <div :style="{ width: '1028px', height: '700px'}">
    <VPdfViewer
      :src="src"
      :darkMode="isDark"
      @update:darkMode="handleDarkModeChanged"
    />
  </div>
</template>

Composition JS

<script setup>
  import { VPdfViewer } from '@vue-pdf-viewer/viewer'
  const src = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
  const isDark = ref(true)
  const handleDarkModeChanged = (dark) => {
    isDark.value = dark
    // TODO: your logic
  }
</script>
<template>
  <!-- Using v-model as two-way binding -->
  <div :style="{ width: '1028px', height: '700px'}">
    <VPdfViewer
      :src="src"
      v-model:darkMode="isDark"
    />
  </div>
  <!-- without v-model -->
  <div :style="{ width: '1028px', height: '700px'}">
    <VPdfViewer
      :src="src"
      :darkMode="isDark"
      @update:darkMode="handleDarkModeChanged"
    />
  </div>
</template>

Options TS

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

  export default defineComponent({
    data() {
      return {
        src: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
        isDark: true,
      }
    },
    methods: {
      handleDarkModeChanged(dark: boolean) {
        this.isDark = dark
        // TODO: your logic
      }
    }
  })
</script>
<template>
  <!-- Using v-model as two-way binding -->
  <div :style="{ width: '1028px', height: '700px'}">
    <VPdfViewer
      :src="src"
      v-model:dark-mode="isDark"
    />
  </div>
  <!-- without v-model -->
  <div :style="{ width: '1028px', height: '700px'}">
    <VPdfViewer
      :src="src"
      :dark-mode="isDark"
      @update:dark-mode="handleDarkModeChanged"
    />
  </div>
</template>

Options JS

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

  export default {
    components: { VPdfViewer },
    data() {
      return {
        src: 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
        isDark: true,
      }
    },
    methods: {
      handleDarkModeChanged(dark) {
        this.isDark = dark
        // TODO: your logic
      }
    }
  }
</script>
<template>
  <!-- Using v-model as two-way binding -->
  <div :style="{ width: '1028px', height: '700px'}">
    <VPdfViewer
      :src="src"
      v-model:dark-mode="isDark"
    />
  </div>
  <!-- without v-model -->
  <div :style="{ width: '1028px', height: '700px'}">
    <VPdfViewer
      :src="src"
      :dark-mode="isDark"
      @update:dark-mode="handleDarkModeChanged"
    />
  </div>
</template>

2. Caching of previous Worker version with bun

• Try running bun pm cache rm to remove cache in the global cache directory. If the error remains, try executing the following steps:

  rm bun.lockb
  rm -R node_modules

• Ensure that you follow this step to override pdfjs-dist version. After that, you may execute this command to install all dependencies again.

    bun i

3. Resolving peer dependency version mismatch with pnpm

When using pnpm, you might encounter an error related to a version mismatch of pdfjs-dist, such as:

UnknownErrorException: The API version "4.5.136" does not match the Worker version "4.4.168".

To resolve this issue, please add pnpm.overrides to your package.json to specify the exact version of pdfjs-dist so that the correct version is used:

"pnpm": {
  "overrides": {
    "pdfjs-dist": "4.4.168"
  }
}

After that, please rerun pnpm install command.

4. Encountering Promise.withResolve is not a function with Nuxt

The VPV component currently does not support server-side rendering. This means you cannot use VPV as a server component. In Nuxt, you might encounter the error Promise.withResolve is not a function if you import VPV at the top of your file without using it within a <ClientOnly> tag. To resolve this issue, please choose one of the methods:

• Register VPV for Auto-import: Register VPV in a local module and use Nuxt's auto-import feature to ensure it loads only on the client
• Create a Client Component: Define your client component with a .client suffix to enforce client-side rendering
• Directly import and use it in <ClientOnly> Tag: Wrap the VPV component within <ClientOnly> to ensure it only renders on the client side

For examples of each method, please refer to the Nuxt section of Basic Usage.