Skip to content

Making Vue PDF Viewer Reusable



For better maintainability of your application's components, it is advisable to create a reusable component. Vue components support fallthrough attributes, which is beneficial if your component uses Vue PDF Viewer as its root. Additionally, Vue PDF Viewer provides VPVBaseProps and default values, ensuring seamless integration.

src/components/AppPdfViewer.vue

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

  const props = defineProps({
      ...VPVBaseProps, 
      title: {
        type: String,
        required: true
      }
    } as const
  )
</script>
<template>
  <div>
    <h2>
      {{ props.title }}
    </h2>
    <div :style="{ width: '1028px', height: '700px', margin: '0 auto'}">
      <VPdfViewer v-bind="props" />
    </div>
  </div>
</template>
vue
<script lang="ts">
  import { defineComponent } from 'vue'
  import { VPdfViewer, VPVBaseProps } from '@vue-pdf-viewer/viewer';
  export default defineComponent({
    components: { VPdfViewer },
    props: {
      ...VPVBaseProps,
      title: {
        type: String,
      },
    }
  })
</script>
<template>
  <div>
    <h2>
      {{ title }}
    </h2>
    <div :style="{ width: '1028px', height: '700px', margin: '0 auto' }">
      <VPdfViewer v-bind="$props" />
    </div>
  </div>
</template>
vue
<script setup>
  import { VPdfViewer, VPVBaseProps } from '@vue-pdf-viewer/viewer';

  const props = defineProps({
      ...VPVBaseProps, 
      title: {
        type: String,
        required: true
      }
    }
  )
</script>
<template>
  <div>
    <h2>
      {{ props.title }}
    </h2>
    <div :style="{ width: '1028px', height: '700px', margin: '0 auto'}">
      <VPdfViewer v-bind="props" />
    </div>
  </div>
</template>
vue
<script>
  import { defineComponent } from 'vue'
  import { VPdfViewer, VPVBaseProps } from '@vue-pdf-viewer/viewer';
  export default defineComponent({
    components: { VPdfViewer },
    props: {
      ...VPVBaseProps,
      title: {
        type: String,
      },
    }
  })
</script>
<template>
  <div>
    <h2>
      {{ title }}
    </h2>
    <div :style="{ width: '1028px', height: '700px', margin: '0 auto' }">
      <VPdfViewer v-bind="$props" />
    </div>
  </div>
</template>

License Validation in Vue and Nuxt Applications

The useLicense() function should be called once per application, preferably on the client side. Here are the recommended approaches for both Vue and Nuxt applications:

Vue

  1. Use main.ts (Recommended)

    ts
    import { createApp } from 'vue'
    import { useLicense } from '@vue-pdf-viewer/viewer'
    import App from './App.vue'
    
    const app = createApp(App)
    useLicense('YOUR-LICENSE-KEY', app)
    app.mount('#app')
  2. Use a Global Plugin

    ts
    // plugins/pdf-viewer.ts
    import { useLicense } from '@vue-pdf-viewer/viewer'
    
    export default {
      install: () => {
        useLicense('YOUR-LICENSE-KEY')
      }
    }
    
    // main.ts
    import { createApp } from 'vue'
    import App from './App.vue'
    import PdfViewerPlugin from './plugins/pdf-viewer'
    
    const app = createApp(App)
    app.use(PdfViewerPlugin)
    app.mount('#app')

    Remark: This approach is cleaner for larger projects.

Nuxt

  1. Use a Nuxt Plugin (Recommended)

    Create a plugin file (e.g., plugins/pdf-viewer-license.client.ts):

    ts
    import { useLicense } from '@vue-pdf-viewer/viewer'
    
    export default defineNuxtPlugin((nuxtApp) => {
      useLicense('YOUR-LICENSE-KEY', nuxtApp.vueApp)
    })
  2. Use app.vue

    vue
    <script setup>
    import { useLicense } from '@vue-pdf-viewer/viewer'
    import { onMounted } from 'vue'
    
    onMounted(() => {
      useLicense('YOUR-LICENSE-KEY')
    })
    </script>

    Important: Only run useLicense on the client side. If you use this method in layout/page components, you might accidentally call it multiple times.

Bonus: Load the license key from .env

For better maintainability, you can store your license key in an environment variable:

bash
NUXT_VPV_LICENSE_KEY=YOUR_LICENSE_KEY
ts
export default defineNuxtConfig({
 runtimeConfig: {
   public: {
    vpvLicenseKey: process.env.NUXT_VPV_LICENSE_KEY || "",
   }
})
ts
import { useLicense } from '@vue-pdf-viewer/viewer'
 
export default defineNuxtPlugin((nuxtApp) => {
  const key = useRuntimeConfig().public.vpvLicenseKey;
  useLicense(key, nuxtApp.vueApp);
})

Choose the approach that best fits your application's architecture. For Nuxt applications, using a plugin is the ideal approach, while for Vue applications, calling useLicense() in main.ts is the most straightforward solution.