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

Composition TS

<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>

Options TS

<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>

Composition JS

<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>

Option JS

<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)

   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

   // 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):

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

2. Use app.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:

.env

NUXT_VPV_LICENSE_KEY=YOUR_LICENSE_KEY

nuxt.config.ts

export default defineNuxtConfig({
 runtimeConfig: {
   public: {
    vpvLicenseKey: process.env.NUXT_VPV_LICENSE_KEY || "",
   }
})

plugins/pdf-viewer-license.client.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.