VUE PDF VIEWER

Appearance

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.

An image of how to add specific domain with Vue PDF Viewer

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

An image of how to add wildcard domain with Vue PDF Viewer

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 ​

vue
<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.VUE_VPV_LICENSE ?? "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>
vue
<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.VUE_VPV_LICENSE ?? "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>
vue
<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>
vue
<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

sh
NUXT_VPV_DOMAIN_TOKEN="Your VPV Domain Token"

nuxt.config.ts / nuxt.config.js

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

server/api/vpv-domain-token.ts

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

components/AppPdfViewer.client.vue

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

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>

Use Domain Tokens for Different Environments ​

If you have different environments for your project, you may set up an .env file to config one domain token per environment.

Step 1: Define Environment Variables ​

Vue

Here is how you can set up an .env file and add it into a Vue project.

.env files

sh
# .env.development VUE_VPV_DOMAIN_TOKEN="Your Dev Domain Token"  # .env.staging VUE_VPV_DOMAIN_TOKEN="Your Staging Domain Token"  # .env.production VUE_VPV_DOMAIN_TOKEN="Your Prod Domain Token"

Nuxt

Here is how you can set up an .env file and add it into a Nuxt project.

.env files

sh
# .env.development NUXT_VPV_DOMAIN_TOKEN="Your Dev Domain Token" # .env.staging NUXT_VPV_DOMAIN_TOKEN="Your Staging Domain Token" # .env.production NUXT_VPV_DOMAIN_TOKEN="Your Prod Domain Token"

Step 2: Configure Each Token in CI/CD Pipeline ​

After defining environment variables for each environment, you can configure them in your CI/CD pipeline so your application can access the correct domain token per environment.

Example: Vercel Configuration

  1. Navigate to your Vercel project → Settings → Environment Variables
  2. Add the following variables for each environment:

Vercel environment variables configuration for domain tokens

Step 3: Utilize useLicense function ​

Execute useLicense function to call on the .env variables

js
import { useLicense } from "@vue-pdf-viewer/viewer"; useLicense(import.meta.env.VUE_VPV_DOMAIN_TOKEN);

Use Domain Tokens for Multiple Domains ​

If your application needs to run on multiple domains or subdomains, you could map the domain tokens on the client-side or server-side to authenticate the license and remove watermark.

For example, you have a Viewer Organization license and you are running an application that serves clients with different domains:

  • Domain 1: example.com
  • Domain 2: classic-example.com
  • Domain 3: complex-example.com

Front-End Implementation ​

vue
<script setup lang="ts"> import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";  const domainTokenMap: Record<string, string> = {  "localhost": "Your Dev Domain Token",  "localhost:5173": "Your Dev Domain Token",  "example.com": "Your Prod Domain Token",  "classic-example.com": "Your Classic Domain Token",  "complex-example.com": "Your Complex Domain Token" };  const currentHost = window.location.host; const YOUR_DOMAIN_TOKEN = domainTokenMap[currentHost] ?? "";  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>
vue
<script setup> import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";  const domainTokenMap = {  "localhost": "Your Dev Domain Token",  "localhost:5173": "Your Dev Domain Token",  "example.com": "Your Prod Domain Token",  "classic-example.com": "Your Classic Domain Token",  "complex-example.com": "Your Complex Domain Token" };  const currentHost = window.location.host; const YOUR_DOMAIN_TOKEN = domainTokenMap[currentHost] ?? "";  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>
vue
<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",  };  },  beforeMount() {  const domainTokenMap: Record<string, string> = {  "localhost": "Your Dev Domain Token",  "localhost:5173": "Your Dev Domain Token",  "example.com": "Your Prod Domain Token",  "classic-example.com": "Your Classic Domain Token",  "complex-example.com": "Your Complex Domain Token"  };  const currentHost = window.location.host;  const token = domainTokenMap[currentHost] ?? "";  useLicense(token);  }, }); </script> <template>  <div :style="{ width: '1028px', height: '700px' }">  <VPdfViewer :src="pdfFileSource" />  </div> </template>
vue
<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",  };  },  beforeMount() {  const domainTokenMap = {  "localhost": "Your Dev Domain Token",  "localhost:5173": "Your Dev Domain Token",  "example.com": "Your Prod Domain Token",  "classic-example.com": "Your Classic Domain Token",  "complex-example.com": "Your Complex Domain Token"  };  const currentHost = window.location.host;  const token = domainTokenMap[currentHost] ?? "";  useLicense(token);  }, }; </script> <template>  <div :style="{ width: '1028px', height: '700px' }">  <VPdfViewer :src="pdfFileSource" />  </div> </template>

Back-End Implementation ​

If you're looking for a more dynamic and secure license authentication approach, you could fetch the host from the client side and match the right domain token via a REST API.

This approach allows the PDF Viewer to initialize the license and remove the watermark without exposing tokens on the client side.