VUE PDF VIEWER

Appearance

Overriding Dependency ​

@vue-pdf-viewer/viewer@^2.0.0 requires pdfjs-dist as a peer dependency with a default version of 4.10.38. This means you do not need to manually install pdfjs-dist unless you want to use a different version.

If your project relies on a specific version of pdfjs-dist that differs from the default, you can override by adding an override in your package.json.

You will need to make adjustments in 3 places:

  1. Change version in your package.json
  2. Configure workerUrl of vite.config.{js,ts} in your Vue project or nuxt.config.{js,ts} in your Nuxt project
  3. Change import path for pdf.worker at the component setup

Step 1: package.json Configuration ​

Here’s how you can configure in your package.json:

json
{
  "overrides": {
    "pdfjs-dist": "desired-version"
  }
}
// Reference: https://bun.sh/docs/install/overrides#overrides
json
{
  "overrides": {
    "@vue-pdf-viewer/viewer": {
      "pdfjs-dist": "desired-version"
    }
  }
}
// Reference: https://docs.npmjs.com/cli/v9/configuring-npm/package-json#overrides
json
{
  "pnpm": {
    "overrides": {
      "pdfjs-dist": "desired-version"
    }
  }
}
// Reference: https://pnpm.io/package_json#pnpmoverrides
json
{
  "resolutions": {
    "@vue-pdf-viewer/viewer/pdfjs-dist": "desired-version",
  }
}
// Reference: https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/

Replace the "desired-version" with the version you prefer, for example, "4.7.76".

To ensure that your preferred pdfjs-dist is installed, you have to add pdfjs-dist to dependencies. Here’s how your package.json might look like:

json
{
  "name": "your-vue-app",
  "version": "1.0.0",
  "dependencies": {
    "@vue-pdf-viewer/viewer": "^1.1.0",
    "pdfjs-dist": "4.7.76"
  },
  "overrides": {
    "pdfjs-dist": "4.7.76"
  }
}

Step 2: Vite Configuration ​

When you change the version of pdfjs-dist, you need to configure the workerUrl for the component to use the new version. Additionally, ensure optimizeDeps is configured in your vite.config.{js,ts} to include pdfjs-dist.

Vue 3 ​

vite.config.{js,ts}:

ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    include: ['pdfjs-dist'],
    esbuildOptions: {
      supported: {
        'top-level-await': true
      },
      target: 'esnext'
    }
  }
});

Nuxt ​

nuxt.config.{js,ts}:

ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: false },
  vite: {
    optimizeDeps: {
      include: ['pdfjs-dist'],
      esbuildOptions: {
        supported: {
          'top-level-await': true
        },
        target: 'esnext'
      }
    }
  },
  build: {
    transpile: [
      (ctx) => ctx.isServer ? 'pdfjs-dist': false, 
      (ctx) => ctx.isServer ? '@vue-pdf-viewer/viewer': false
    ],
  },
})

Step 3: Component Setup Configuration: ​

Make sure to adjust the import path for pdf.worker based on the version of pdfjs-dist you are using, as it might differ between versions. Alternatively, you may copy the worker file from node_modules and place it in the public directory to use it.

vue
<script setup>
import { VPdfViewer } from '@vue-pdf-viewer/viewer';
  
import pdfWorker from 'pdfjs-dist/build/pdf.worker?url'; // Adjust the path based on the `pdfjs-dist` version
const pdfSource = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf';
</script>
<template>
  <VPdfViewer :workerUrl="pdfWorker" :src="pdfSource" />
</template>