Licensing

INFO

To remove watermark from Vue PDF Viewer, a valid license is required. Please sign up for a free trial or purchase a commercial license.

Manage a License Key

After purchasing a license, you will receive an email with instructions on how to generate a license key. You could also access License Manager directly to create and manage your license keys. Each license key must be bound to a corresponding domain, subdomain or IP address.

On the Manage License Key page, you can generate multiple keys per license. However, each license key can only be linked to a single domain or subdomain/IP, using one of the following license key types: Specific Host and Wildcard.

Specific Host

A Specific Host license key binds to an exact domain, subdomain or IP address.

Accepted formats include:

• Localhost (e.g., localhost:3000, localhost:5173) for local development
• Subdomains (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)

⚠️ Only exact matches are supported. For example, a license key for example.com will not cover subdomains like www.example.com or xyz.example.com. These must be added separately.

Wildcard

Wildcard is only available with an Organization license.

A Wildcard license key binds to a single root domain and automatically includes all of its subdomains.

For example, a license key binded to your-domain.com will also cover:

• app.your-domain.com
• dev.your-domain.com
• admin.your-domain.com

Remark: For more details, refer to the License Agreement

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