Skip to content

Basic Usage

The VPV component, by default, will take the full size of its container which you can also set the width and height. The component is designed to be web responsive.

Vue 3 - Import Component

To initiate VPV, you will first need to import VPdfViewer component.

There are two main ways to use VPV in your project, namely:

  • Composition API: A new method to organize and reuse logic by allowing developers to write components as functions.
  • Options API: A traditional method from Vue 2 where components are grouped into series of options.

Composition API

html
<script setup>
  import { VPdfViewer } from '@vue-pdf-viewer/viewer';
</script>
<template>
  <div :style="{ width: '1028px', height: '700px'}">
    <VPdfViewer src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" />
  </div>
</template>

Options API

html
<script>
  import { VPdfViewer } from '@vue-pdf-viewer/viewer';
  
  export default {
    components: { VPdfViewer },
    data() {
      return {
        src: "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      }
    }
  }
</script>
<template>
  <VPdfViewer :src="src" />
</template>

Nuxt - Import Component

To initiate VPV, you will first need to import VPdfViewer component. Because the VPV component is rendered on the client-side, you need to ensure it is loaded properly in a Nuxt project. Here are 3 recommended methods to integrate VPV:

  1. Register VPV with Nuxt auto-import components.

Register VPV in a local module to take advantage of Nuxt's auto-import feature. This allows you to use the component without importing it manually in every file. Refer to the Nuxt documentation on npm packages for details:

  • Create modules/register-components.ts, and use addComponent to register VPV globally:
    typescript
    import { addComponent, defineNuxtModule } from '@nuxt/kit'
    export default defineNuxtModule({
      setup() {
        addComponent({
          name: 'MyAutoImportedVPdfViewer',
          export: 'VPdfViewer',
          filePath: '@vue-pdf-viewer/viewer',
        })
      },
    })
  • Use <MyAutoImportedVPdfViewer /> within <ClientOnly> tag in any file.
    vue
    <template>
      <!-- PDF works with client side only -->
      <ClientOnly>
        <div :style="{ width: '1028px', height: '700px'}">
          <MyAutoImportedVPdfViewer
            src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
          />
        </div>
      </ClientOnly>
    </template>
  1. Create a Client Component

You can create your own client component with a .client suffix to ensure the component is only loaded on the client-side.

  • Create a client component

INFO

components/AppPdfViewer.client.vue

vue
<script lang="ts" setup>
  import { VPdfViewer, VPVBaseProps } from '@vue-pdf-viewer/viewer';
  const props = defineProps({ ...VPVBaseProps })
</script>
<template>
  <div :style="{ width: '1028px', height: '700px', margin: '0 auto' }">
    <VPdfViewer v-bind="$props" />
  </div>
</template>
  • Use the client component in your pages:

INFO

pages/index.vue

vue
<script setup lang="ts">
  const pdfSrc = ref('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
</script>
<template>
  <h1>Index page</h1>
  <AppPdfViewer :src="pdfSrc" />
</template>

Remark: For more details, please refer to the Nuxt documentation on client components.

  1. Directly import and use it inside <ClientOnly> tag
vue
<script setup lang="ts">
  import { VPdfViewer } from "@vue-pdf-viewer/viewer";
</script>
<template>
  <!-- PDF works with client side only -->
  <ClientOnly>
    <div :style="{ width: '1028px', height: '700px'}">
      <VPdfViewer
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </ClientOnly>
</template>

Remark: If you encounter the error 500 Promise.withResolve is not a function, it means that you are importing the VPdfViewer but not using it. Please ensure that any VPV components are only used within the client-side.

Nuxt Config

To avoid errors on the server-side when using the pdfjs-dist library in a Nuxt.js project, add the following snippet into your Nuxt config. This ensures that the library is transpiled only on the server side during the build process:

ts
// nuxt.config.ts
export default defineNuxtConfig({
  // ..
  build: {
    transpile: [
      (ctx) => ctx.isServer ? 'pdfjs-dist': false,
      (ctx) => ctx.isServer ? '@vue-pdf-viewer/viewer': false
    ]
  }
  // ..
})

After executing the development command and opening the browser, here is how it will look.