Getting Started

To start using @vue-pdf-viewer/annotation with @vue-pdf-viewer/viewer, follow these steps:

Prerequisites

• Vue 3 application or Nuxt application
• Installed @vue-pdf-viewer/viewer (version >=3.0.0)

Install the Plugin

You can install the plugin using your preferred package manager.

bun

bun add @vue-pdf-viewer/annotation

npm

npm install @vue-pdf-viewer/annotation

pnpm

pnpm install @vue-pdf-viewer/annotation

yarn

yarn add @vue-pdf-viewer/annotation

Import and Utilize

In your PDF viewer component, import the annotation plugin and pass it to the plugins prop of VPdfViewer as shown in the example below:

Composition API

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

<template>
  <VPdfViewer 
    src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf" 
    <!-- Utilize annotation plugin -->
    :plugins="[VPdfAnnotationPlugin()]" 
  />
</template>

Options API

<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() {
    return {
      annotationPlugin: VPdfAnnotationPlugin()
    }
  }
})
</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>

Remark: For more details on how to set up with Nuxt, please refer to Basic Usage