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
<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>
<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>
<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>
<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
Use main.ts (Recommended)
tsimport { 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')
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
Use a Nuxt Plugin (Recommended)
Create a plugin file (e.g.,
plugins/pdf-viewer-license.client.ts
):tsimport { useLicense } from '@vue-pdf-viewer/viewer' export default defineNuxtPlugin((nuxtApp) => { useLicense('YOUR-LICENSE-KEY', nuxtApp.vueApp) })
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:
NUXT_VPV_LICENSE_KEY=YOUR_LICENSE_KEY
export default defineNuxtConfig({
runtimeConfig: {
public: {
vpvLicenseKey: process.env.NUXT_VPV_LICENSE_KEY || "",
}
})
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.