Configure Annotation Tools

You can customize the appearance and behavior of annotation tools by passing additional options to the VPdfAnnotationPlugin function.

Show/Hide Annotation Tools

You can enable or disable each annotation tool based on what you want your users to access. By default, all annotation tools are enabled and visible.

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: false, // Disable and hide highlight tool  }); </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: false, // Disable and hide highlight tool  }); </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() {  const annotationPlugin = VPdfAnnotationPlugin({  highlight: false // Disable and hide highlight 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> import { VPdfViewer } from '@vue-pdf-viewer/viewer' import VPdfAnnotationPlugin from '@vue-pdf-viewer/annotation' import { defineComponent } from 'vue';  export default defineComponent({  components: { VPdfViewer },  data() {  const annotationPlugin = VPdfAnnotationPlugin({  highlight: false // Disable and hide highlight 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>

Configure with Custom Icons

If you want to replace the default highlight icon in the toolbar, you can easily provide your own custom icons for annotation tools.

For example, create a custom highlight icon component:

./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>

Then, use it in your configuration as shown below:

Composition TS

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

Configure Highlight Tool

Configure Highlight Color

Currently, the Highlight tool has a color palette of 6 default colors. Here is how you can change the highlight color.

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: {  colors: [  {label: 'Red', value: 'red'},   {label: 'Green', value: '#007700'}, // hex color   {label: 'Blue', value: '#0000ff90'}] // hex color with opacity  }, // configure allowed highlight colors to select  }); </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: {  colors: [  {label: 'Red', value: 'red'},   {label: 'Green', value: '#007700'}, // hex color   {label: 'Blue', value: '#0000ff90'}] // hex color with opacity  }, // configure allowed highlight colors to select  }); </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: {  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: {  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>

Configure Free Text Tool

Configure Font Color

Currently, the Free Text tool has a color palette of 12 default colors. Here is how you can change the font color.

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

Configure Font Size

For the Free Text tool, you can change or add font size depending on your preference.

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