Interfaces

AnnotationColors

Type	Description
LabelValuePair[] | string[]	An array of either LabelValuePair objects or color strings. Remark: The label of LabelValuePair will apply to both aria-label and title attribute to ensure accessibility.

AnnotationFreeTextFontColors

Type	Description
AnnotationColors & { length: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 } | null	Accept AnnotationColors with a fixed length between 1 and 12 or null. If null, the default font colors will be used.

Composition TS

<script setup lang="ts">
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
  freeText: {
    // Set available font colors
    fontColors: [
      { label: "Red", value: "red" },
      { label: "Green", value: "#007700" },    // Hex color
      { label: "Yellow", value: "#ffff0090" }, // Hex color with opacity
    ],
  },
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

Composition JS

<script setup>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
  freeText: {
    // Set available font colors
    fontColors: [
      { label: "Red", value: "red" },
      { label: "Green", value: "#007700" },    // Hex color
      { label: "Yellow", value: "#ffff0090" }, // Hex color with opacity
    ],
  },
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

Options TS

<script lang="ts">
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";
import { defineComponent } from "vue";

// Custom configuration
export default defineComponent({
  components: { VPdfViewer },
  data() {
    const annotationPlugin = VPdfAnnotationPlugin({
      freeText: {
        // Set available font colors
        fontColors: [
          { label: "Red", value: "red" },
          { label: "Green", value: "#007700" },    // Hex color
          { label: "Yellow", value: "#ffff0090" }, // Hex color with opacity
        ],
      },
    });
    return {
      annotationPlugin,
    };
  },
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

Options JS

<script>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";
import { defineComponent } from "vue";

// Custom configuration
export default defineComponent({
  components: { VPdfViewer },
  data() {
    const annotationPlugin = VPdfAnnotationPlugin({
      freeText: {
        // Set available font colors
        fontColors: [
          { label: "Red", value: "red" },
          { label: "Green", value: "#007700" },    // Hex color
          { label: "Yellow", value: "#ffff0090" }, // Hex color with opacity
        ],
      },
    });
    return {
      annotationPlugin,
    };
  },
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

AnnotationHighlightColors

Type	Description
AnnotationColors & { length: 1 | 2 | 3 | 4 | 5 | 6 } | null	Accept AnnotationColors with a fixed length between 1 and 6 or null. If null, the default highlight colors will be used.

Composition TS

<script setup lang="ts">
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
  highlight: {
    // Set available highlight colors
    colors: [
      { label: "Red", value: "red" },
      { label: "Green", value: "#007700" }, // Hex color
      { label: "Blue", value: "#0000ff90" },// Hex color with opacity
    ],
  },
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

Composition JS

<script setup>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
  highlight: {
    // Set available highlight colors
    colors: [
      { label: "Red", value: "red" },
      { label: "Green", value: "#007700" }, // Hex color
      { label: "Blue", value: "#0000ff90" },// Hex color with opacity
    ],
  },
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

Options TS

<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

// Custom configuration
export default defineComponent({
  components: { VPdfViewer },
  data() {
    const annotationPlugin = VPdfAnnotationPlugin({
      highlight: {
      // Set available highlight colors
        colors: [
          {label: 'Red', value: 'red'},
          {label: 'Green', value: '#007700'},  // Hex color
          {label: 'Blue', value: '#0000ff90'}  // Hex color with opacity
        ]
      }
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

Options JS

<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

// Custom configuration
export default defineComponent({
  components: { VPdfViewer },
  data() {
    const annotationPlugin = VPdfAnnotationPlugin({
      highlight: {
      // Set available highlight colors
        colors: [
          {label: 'Red', value: 'red'},
          {label: 'Green', value: '#007700'},  // Hex color
          {label: 'Blue', value: '#0000ff90'}  // Hex color with opacity
        ]
      }
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

AnnotationOption

Property	Type	Description
icon	Component | VNode | string	Icon for the annotation tool (can be a component, VNode, or string).

<!-- ./components/IconHighlight.vue -->
<template>
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M20 6L9 17L4 12"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
  </svg>
</template>

Composition TS

<script setup lang="ts">
import { h } from "vue";
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";
import IconHighlight from "./components/IconHighlight.vue";

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
  highlight: {
    // Use a custom icon component for the highlight tool
    icon: IconHighlight,
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

Composition JS

<script setup>
import { h } from "vue";
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";
import IconHighlight from "./components/IconHighlight.vue";

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
  highlight: {
    // Use a custom icon component for the highlight tool
    icon: IconHighlight,
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

Options TS

<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';
import IconHighlight from './components/IconHighlight.vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration
    const annotationPlugin = VPdfAnnotationPlugin({
      // Use a custom icon component for the highlight tool
      highlight: {
        icon: IconHighlight
      }
    });
		return {
			annotationPlugin
		}
	}
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

Options JS

<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';
import IconHighlight from './components/IconHighlight.vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration
    const annotationPlugin = VPdfAnnotationPlugin({
      // Use a custom icon component for the highlight tool
      highlight: {
        icon: IconHighlight
      }
    });
		return {
			annotationPlugin
		}
	}
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

FreeTextOption (extends AnnotationOption)

Property	Type	Description
fontColors	AnnotationFreeTextFontColors	Available font color options for free text annotations.
fontSizes	number[]	List of font sizes for free text annotations.

Composition TS

<script setup lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
    freeText: {
      // Set available font colors
      fontColors: [
        {label: 'Red', value: 'red'},
        {label: 'Green', value: '#007700'},   // Hex color
        {label: 'Yellow', value: '#ffff0090'} // Hex color with opacity
      ]
      // Set available font sizes
      fontSizes: [ 12, 14, 16 ]
    }
  });
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

Composition JS

<script setup>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
    freeText: {
      // Set available font colors
      fontColors: [
        {label: 'Red', value: 'red'},
        {label: 'Green', value: '#007700'},   // Hex color
        {label: 'Yellow', value: '#ffff0090'} // Hex color with opacity
      ]
      // Set available font sizes
      fontSizes: [ 12, 14, 16 ]
    }
  });
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

Options TS

<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration
    const annotationPlugin = VPdfAnnotationPlugin({
      freeText: {
        // Set available font colors
        fontColors: [
          {label: 'Red', value: 'red'},
          {label: 'Green', value: '#007700'},   // Hex color
          {label: 'Yellow', value: '#ffff0090'} // Hex color with opacity
        ],
        // Set available font sizes
        fontSizes: [ 12, 14, 16 ]
      }
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

Options JS

<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration
    const annotationPlugin = VPdfAnnotationPlugin({
      freeText: {
        // Set available font colors
        fontColors: [
          {label: 'Red', value: 'red'},
          {label: 'Green', value: '#007700'},   // Hex color
          {label: 'Yellow', value: '#ffff0090'} // Hex color with opacity
        ],
        // Set available font sizes
        fontSizes: [ 12, 14, 16 ]
      }
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

HighlightOption (extends AnnotationOption)

Property	Type	Description	Default
colors	AnnotationHighlightColors	Available highlight colors.	["#CAAAFF" /* Purple */, "#65EDE9" /* Cyan */, "#FFACAC" /* Red */, "#FFBD82" /* Orange */, "#FCE244" /* Yellow */, "#A0F751" /* Green */]

Composition TS

<script setup lang="ts">
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
  highlight: {
    // Set available highlight colors
    colors: [
      { label: "Red", value: "red" },
      { label: "Green", value: "#007700" }, // Hex color
      { label: "Blue", value: "#0000ff90" },// Hex color with opacity
    ],
  },
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

Composition JS

<script setup>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin from "@vue-pdf-viewer/annotation";

// Custom configuration
const annotationPlugin = VPdfAnnotationPlugin({
  highlight: {
    // Set available highlight colors
    colors: [
      { label: "Red", value: "red" },
      { label: "Green", value: "#007700" }, // Hex color
      { label: "Blue", value: "#0000ff90" },// Hex color with opacity
    ],
  },
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

Options TS

<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration
    const annotationPlugin = VPdfAnnotationPlugin({
      highlight: {
        // Set available highlight colors
        colors: [
          {label: 'Red', value: 'red'},
          {label: 'Green', value: '#007700'},  // Hex color
          {label: 'Blue', value: '#0000ff90'}  // Hex color with opacity
        ]
      }
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

Options JS

<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration
    const annotationPlugin = VPdfAnnotationPlugin({
      highlight: {
        // Set available highlight colors
        colors: [
          {label: 'Red', value: 'red'},
          {label: 'Green', value: '#007700'},  // Hex color
          {label: 'Blue', value: '#0000ff90'}  // Hex color with opacity
        ]
      }
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

ImageOption (extends AnnotationOption)

Currently, there is no configurable property.

---

LabelValuePair

Property	Type	Description
label	string	A human-readable name for its value
value	string	The corresponding value

---

VPdfAnnotationPluginOptions

Property	Type	Description	Default
freeText	FreeTextOption | boolean	Can be false to hide the Free Text tool or an object to customize further	true
highlight	HighlightOption | boolean	Can be false to hide the Highlight tool or an object to customize further	true
image	ImageOption | boolean	Can be false to hide the Image tool or an object to customize further	true

Composition TS

<script setup lang="ts">
import { h } from "vue";
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin, { type VPdfAnnotationPluginOptions } from "@vue-pdf-viewer/annotation";

const options: VPdfAnnotationPluginOptions = {
  freeText: true,
  highlight: true,
  image: false // This will disable the image annotation tool
}
const annotationPlugin = VPdfAnnotationPlugin(options);

</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer 
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" 
      :plugins="[annotationPlugin]" 
    />
  </div>
</template>

Composition JS

<script setup>
import { h } from "vue";
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import VPdfAnnotationPlugin, { type VPdfAnnotationPluginOptions } from "@vue-pdf-viewer/annotation";

const options: VPdfAnnotationPluginOptions = {
  freeText: true,
  highlight: true,
  image: false // This will disable the image annotation tool
}
const annotationPlugin = VPdfAnnotationPlugin(options);

</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer 
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" 
      :plugins="[annotationPlugin]" 
    />
  </div>
</template>

Options TS

<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration
    const annotationPlugin = VPdfAnnotationPlugin({
      freeText: true,
      highlight: true,
      image: false // This will disable the image annotation tool
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>

Options JS

<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    // Custom configuration
    const annotationPlugin = VPdfAnnotationPlugin({
      freeText: true,
      highlight: true,
      image: false // This will disable the image annotation tool
    });
    return {
      annotationPlugin
    }
  }
});
</script>

<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      :plugins="[annotationPlugin]"
    />
  </div>
</template>