Interfaces

Annotation

Property	Type	Description
id	string | null	Unique identifier for the annotation, null when it is a new annotation
annotationType	AnnotationType	Type of annotation (e.g., highlight, text, link)
rotation	number	Rotation angle of the annotation
rect	number[]	Rectangular boundary of the annotation [x1, y1, x2, y2]
annotationFlags?	AnnotationFlag	Flags defining annotation behavior
borderStyle?	AnnotationBorderStyle	Border styling properties
color?	Uint8ClampedArray | null	Primary color of the annotation
creationDate?	string | null	Date when annotation was created
backgroundColor?	Uint8ClampedArray | null	Background color of the annotation
borderColor?	Uint8ClampedArray | null	Border color of the annotation
contentsObj?	AnnotationStringObj	Content text with direction information
hasOwnCanvas?	boolean	Whether annotation has its own canvas element
hasAppearance?	boolean	Whether annotation has appearance stream
modificationDate?	string | null	Date when annotation was last modified
quadPoints?	Float32Array	Quadrilateral points for text markup annotations
subtype?	string	Annotation subtype identifier
noRotate?	boolean	Whether annotation should not rotate with page
noHTML?	boolean	Whether annotation should not render as HTML
isEditable?	boolean	Whether annotation can be edited
structParent?	number	Structure parent reference
titleObj?	AnnotationStringObj	Title/author with direction information
opacity?	number	Opacity level of the annotation
file?	AnnotationAttachment	File attachment data
dest?	OutlineDestinations	Link destination (for link annotations)
url?	string	URL target (for link annotations)
unsafeUrl?	string	Invalidate URL target
action?	LinkAction	Navigation action (FirstPage, LastPage, etc.)
newWindow?	boolean	Whether link opens in new window
pageIndex?	number	Page index where annotation exists (editor prop)
deleted?	boolean	Whether annotation is marked for deletion (editor prop)
noView?	boolean	Whether annotation is hidden from view (editor prop)
noPrint?	boolean	Whether annotation is excluded from printing (editor prop)
fontSize?	number	Font size for text annotations (editor prop)
contents?	string	Text content of the annotation (editor prop)

---

AnnotationBorderStyle

Property	Type	Description
dashArray	number[]	Array defining the dash pattern for dashed borders
horizontalCornerRadius	number	Horizontal corner radius for rounded borders
style	number	Border style identifier
verticalCornerRadius	number	Vertical corner radius for rounded borders
width	number	Border width
rawWidth	number	Original/unscaled border width

---

AnnotationCallback

Type Definition

type AnnotationCallback<T = Annotation> = (data: T) => void;

See also: Annotation

---

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.

AnnotationFlag

Enum Definition

enum AnnotationFlag {
  INVISIBLE = 0x01,
  HIDDEN = 0x02,
  PRINT = 0x04,
  NOZOOM = 0x08,
  NOROTATE = 0x10,
  NOVIEW = 0x20,
  READONLY = 0x40,
  LOCKED = 0x80,
  TOGGLENOVIEW = 0x100,
  LOCKEDCONTENTS = 0x200,
}

Flag	Value	Description
INVISIBLE	0x01	Annotation is invisible and does not display
HIDDEN	0x02	Annotation is hidden from view and interaction
PRINT	0x04	Annotation should be printed
NOZOOM	0x08	Annotation does not scale with zoom
NOROTATE	0x10	Annotation does not rotate with page rotation
NOVIEW	0x20	Annotation is not displayed on screen but may print
READONLY	0x40	Annotation cannot be edited or deleted
LOCKED	0x80	Annotation cannot be deleted or its properties modified
TOGGLENOVIEW	0x100	Toggles the NOVIEW flag behavior
LOCKEDCONTENTS	0x200	Annotation contents cannot be modified

---

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>

---

AnnotationStringObj

Property	Type	Description
dir	string	Text direction (e.g., 'ltr', 'rtl')
str	string	The actual string content

---

AnnotationType

Enum Definition

enum AnnotationType {
  Text = 1,
  Link = 2,
  FreeText = 3,
  Line = 4,
  Square = 5,
  Circle = 6,
  Polygon = 7,
  Polyline = 8,
  Highlight = 9,
  Underline = 10,
  Squiggly = 11,
  StrikeOut = 12,
  Stamp = 13,
  Caret = 14,
  Ink = 15,
  Popup = 16,
  FileAttachment = 17,
  Sound = 18,
  Movie = 19,
  Widget = 20,
  Screen = 21,
  PrinterMark = 22,
  TrapNet = 23,
  Watermark = 24,
  ThreeD = 25,
  Redact = 26,
}

Type	Value	Description
Text	1	Text annotation (sticky note)
Link	2	Link annotation
FreeText	3	Free text annotation
Line	4	Line annotation
Square	5	Square/rectangle annotation
Circle	6	Circle/ellipse annotation
Polygon	7	Polygon annotation
Polyline	8	Polyline annotation
Highlight	9	Highlight text markup annotation
Underline	10	Underline text markup annotation
Squiggly	11	Squiggly underline text markup annotation
StrikeOut	12	Strikeout text markup annotation
Stamp	13	Rubber stamp annotation
Caret	14	Caret annotation
Ink	15	Ink/freehand drawing annotation
Popup	16	Popup annotation
FileAttachment	17	File attachment annotation
Sound	18	Sound annotation
Movie	19	Movie annotation
Widget	20	Interactive form widget
Screen	21	Screen annotation
PrinterMark	22	Printer's mark annotation
TrapNet	23	Trap network annotation
Watermark	24	Watermark annotation
ThreeD	25	3D annotation
Redact	26	Redaction annotation

---

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

---

LinkAction

Type Definition

type LinkAction = "FirstPage" | "LastPage" | "NextPage" | "PrevPage" | "GoBack" | "GoForward";

Value	Description
FirstPage	Navigate to the first page of the document
LastPage	Navigate to the last page of the document
NextPage	Navigate to the next page
PrevPage	Navigate to the previous page
GoBack	Navigate back in history
GoForward	Navigate forward in history

---

OutlineName

Property	Type	Description
name	string	Destination name type (e.g., 'WYZ', 'Fit', 'FitH', 'FitV')

---

OutlineRef

Property	Type	Description
gen	number	Generation number of the PDF object
num	number	Object number of the PDF reference

---

OutlineDestinations

Type Definition

type OutlineDestinations = [
  // The first item is used to indicate the destination page
  OutlineRef | number,
  // Destination name object specifying the view type
  OutlineName,
  // Additional parameters specific to the destination type
  ...any[]
];

---

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>