Licensing

Authenticate Your License

A valid key and an approved domain are required to remove the watermark on Vue PDF Viewer from such sites.

Add a license key

After making a license purchase, you should receive a license key. You could also access the License Manager to retrieve 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({ licenseKey: "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({ licenseKey: "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.ts / nuxt.config.js

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({ licenseKey: 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>

Add an approved domain

An approved domain restricts license key usage to only specific domains you approved. To start adding an approved domain, please access the License Manager.

On the Approved Domain page, you can add as many domains as you like, including:

• Localhost (e.g., localhost, localhost:3000) for local development
• Domain names (e.g., example.com, www.example.com)
• IP addresses and non-standard ports (e.g., 192.168.1.1, 127.0.0.1:5173)

Important Notes

• Domains and ports are matched based on exact matches only. If you add example.com, only example.com will be approved. Subdomains like www.example.com or non-standard ports like localhost:5173 will not work unless added separately.
• Wildcard characters (*) are not supported at the moment. Each domain, subdomain and non-standard port need to be added individually.
• Your license key will only function on these domains. Watermark in Vue PDF Viewer will still be visible on those domains that are not added.

Remark: For more information on the licensing details