VUE PDF VIEWER

Appearance

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.

vue
<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>
vue
<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>
vue
<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>
vue
<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

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:

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

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

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

vue
<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>
vue
<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>
vue
<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>
vue
<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>