Licensing
Authenticate Your License
A valid license key is required to remove the watermark on Vue PDF Viewer.
Add a license key
After making a license purchase, you will receive an email with a short instruction on how to generate a license key. You could also access the License Manager directly to create your license key.
Here is how you can add the license key in your project.
Vue 3
<script setup lang="ts">
import { VPdfViewer, useLicense } from '@vue-pdf-viewer/viewer';
// If the value is empty or incorrect, the watermark will remain.
const licenseKey = import.meta.env.VITE_VPV_LICENSE ?? 'your-VPV-license-key';
// useLicense must be used here to ensure proper license
// initialization before the component renders.
useLicense(licenseKey);
const pdfFileSource = "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
</script>
<template>
<div :style="{ width: '1028px', height: '700px'}">
<VPdfViewer :src="pdfFileSource" />
</div>
</template>
<script setup>
import { VPdfViewer, useLicense } from '@vue-pdf-viewer/viewer';
// If the value is empty or incorrect, the watermark will remain.
const licenseKey = import.meta.env.VITE_VPV_LICENSE ?? 'your-VPV-license-key';
// useLicense must be used here to ensure proper license
// initialization before the component renders.
useLicense(licenseKey);
const pdfFileSource = "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
</script>
<template>
<div :style="{ width: '1028px', height: '700px'}">
<VPdfViewer :src="pdfFileSource" />
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
export default defineComponent({
components: { VPdfViewer },
data() {
return {
pdfFileSource:
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
};
},
// Must call useLicense before the component is mounted to ensure proper
// license initialization before the component renders.
beforeMount() {
useLicense("your-license-key");
}
});
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" />
</div>
</template>
<script>
import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
export default {
components: { VPdfViewer },
data() {
return {
pdfFileSource:
"https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
};
},
// Must call useLicense before the component is mounted to ensure proper
// license initialization before the component renders.
beforeMount() {
useLicense("your-license-key");
}
};
</script>
<template>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer :src="pdfFileSource" />
</div>
</template>
Nuxt
When using Nuxt, you have the option to store the license key on the server-side:
.env
NUXT_VPV_LICENSE_KEY=your-VPV-license-key
nuxt.config.js / nuxt.config.ts
export default defineNuxtConfig({
// ...
runtimeConfig: {
vpvLicenseKey: ''
}
})
server/api/vpv-license-key.ts
export default defineEventHandler((event) => {
const { vpvLicenseKey } = useRuntimeConfig(event)
return {
licenseKey: vpvLicenseKey
}
})
components/AppPdfViewer.client.vue
<script lang="ts" setup>
import { VPdfViewer, useLicense, VPVBaseProps } from '@vue-pdf-viewer/viewer';
const props = defineProps({
...VPVBaseProps,
title: String,
licenseKey: {
type: String,
required: false
}
})
useLicense(props.licenseKey);
</script>
<template>
<div>
<h2>
{{ props.title }}
</h2>
<div :style="{ width: '1028px', height: '700px', margin: '0 auto' }">
<VPdfViewer v-bind="$props" />
</div>
</div>
</template>
pages/index.vue
<script setup lang="ts">
// This will be requested on server-side
const { data } = await useFetch<{ licenseKey: string }>('/api/vpv-license-key');
// If the value is empty or incorrect, the watermark will remain.
const licenseKey = computed(() => data.value?.licenseKey);
</script>
<template>
<ClientOnly>
<div :style="{ width: '1028px', height: '700px'}">
<AppPdfViewer
src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
title="Shared Component"
:licenseKey="licenseKey"
/>
</div>
</ClientOnly>
</template>
Manage a License Key
A license key is restricted to a corresponding domain, subdomain or IP address. To manage your license keys, please access the License Manager.
On the Manage License Key page for each purchased license, you can generate as many license keys as needed. Each license key can only bind to a single domain based on one of the two options: Specific Host and Wildcard.
Specific Host
A specific host license key binds to an exact domain, subdomain or IP address. Accepted values include:
- Localhost (e.g.,
localhost
,localhost:3000
) for local development - Domain names (e.g.,
test.example.com
,www.example.com
) - IP addresses and non-standard ports (e.g.,
192.168.1.1
,127.0.0.1:5173
)
Domains are matched based on exact matches only. If you add
example.com
, onlyexample.com
will be approved. Subdomains likewww.example.com
orxyz.example
.com will not work unless you add them separately.
Wildcard
A wildcard license key binds to a single domain and automatically includes all of its subdomains.
For instance, if you bind your-domain.com
to a license key, subdomains such as app.your-domain.com
, dev.your-domain.com
and admin.your-domain.com
will also be included under this license key.
Wildcard is only supported in an Organization license.
Remark: For more information on the licensing details