VUE PDF VIEWER

Dependencies ​

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

Peer Dependency Override ​

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.ts/js in your Vue project or nuxt.config.ts/js in your Nuxt project
  3. Change import path for pdf.worker at component setup

package.json Configuration ​

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

json
{
  "overrides": {
    "pdfjs-dist": "desired-version"
  }
}

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

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.5.136"
  },
  "overrides": {
    "pdfjs-dist": "4.5.136"
  }
}
json
{
  "name": "your-vue-app",
  "version": "1.0.0",
  "dependencies": {
    "@vue-pdf-viewer/viewer": "^1.1.0",
    "pdfjs-dist": "4.2.67"
  },
  "pnpm": {
    "overrides": {
      "pdfjs-dist": "4.2.67"
    }
  }
}
json
{
  "name": "your-vue-app",
  "version": "1.0.0",
  "dependencies": {
    "@vue-pdf-viewer/viewer": "^1.1.0",
    "pdfjs-dist": "4.2.67"
  },
  "resolutions": {
    "@vue-pdf-viewer/viewer/pdfjs-dist": "4.2.67"
  }
}
json
{
  "name": "your-vue-app",
  "version": "1.0.0",
  "dependencies": {
    "@vue-pdf-viewer/viewer": "^1.1.0",
    "pdfjs-dist": "4.2.67"
  },
  "overrides": {
    "@vue-pdf-viewer/viewer": {
      "pdfjs-dist": "4.2.67"
    }
  }
}

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.ts/js to include pdfjs-dist.

Vue 3 ​

vite.config.ts/js:

javascript
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.ts/js:

javascript
// 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
    ],
  },
})

Component Setup:

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.