Licensing

INFO

To remove watermark from Vue PDF Viewer, a valid license is required. Please purchase a commercial license.

Manage a Domain Token

A domain token is a unique key that unlocks Vue PDF Viewer for a domain, subdomain, or IP address. It authenticates your licensed usage and removes the watermark in the viewer.

After purchasing a license, you will receive an email with instructions on how to generate tokens for your corresponding domains. Each token must be bound to a corresponding domain, subdomain or IP address.

You could also access the License Manager page directly to create and manage your tokens.

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

Specific Host

A Specific Host domain token 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 token 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 domain token binds to a single root domain and automatically includes all of its subdomains.

For example, a token 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

Use a Domain Token

After creating a token for your domain on the License Manager page, here is how you can add a domain token 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 YOUR_DOMAIN_TOKEN =
  import.meta.env.VITE_VPV_DOMAIN_TOKEN ?? "Your VPV Domain Token";

// useLicense must be used here to ensure proper license
// initialization before the component renders.
useLicense(YOUR_DOMAIN_TOKEN); 

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 YOUR_DOMAIN_TOKEN =
  import.meta.env.VITE_VPV_DOMAIN_TOKEN ?? "Your VPV Domain Token";

// useLicense must be used here to ensure proper license
// initialization before the component renders.
useLicense(YOUR_DOMAIN_TOKEN); 

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 VPV Domain Token");
  }
});
</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 VPV Domain Token"); 
  }
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer :src="pdfFileSource" />
  </div>
</template>

Nuxt

When using Nuxt, you have the option to store the token on the server-side:

.env

NUXT_VPV_DOMAIN_TOKEN="Your VPV Domain Token"

nuxt.config.ts / nuxt.config.js

export default defineNuxtConfig({
  // ... 
  runtimeConfig: {
    vpvDomainToken: process.env.NUXT_VPV_DOMAIN_TOKEN || "Your VPV Domain Token"
  }
})

server/api/vpv-domain-token.ts

export default defineEventHandler((event) => {
  const { vpvDomainToken } = useRuntimeConfig(event)
  return {
    vpvDomainToken
  }
})

components/AppPdfViewer.client.vue

<script lang="ts" setup>
  import { VPdfViewer, useLicense, VPVBaseProps } from '@vue-pdf-viewer/viewer';

  const props = defineProps({ 
    ...VPVBaseProps, 
    title: String,
    vpvDomainToken: { 
      type: String, 
      required: false 
    }
  })
  useLicense(props.vpvDomainToken);
</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<{ vpvDomainToken: string }>('/api/vpv-domain-token');
  // If the value is empty or incorrect, the watermark will remain.
  const vpvDomainToken = computed(() => data.value?.vpvDomainToken);
</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"
        :vpvDomainToken="vpvDomainToken"
      />
    </div>
  </ClientOnly>
</template>