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

Composition TS

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

Composition JS

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

Options TS

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

Options JS

<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, only example.com will be approved. Subdomains like www.example.com or xyz.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