### Development Setup and Execution

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/introduction.md

Clone the repository, install dependencies, and run the project with hot reload or serve the documentation locally.

```sh
# Clone the repository
git clone https://github.com/TaTo30/vue-pdf.git
# Change to code folder
cd vue-pdf
# Install node_modules
npm install
# Run code with hot reload
npm run dev
# Run docs
npm run dev:docs
```

--------------------------------

### Install VuePDF

Source: https://github.com/tato30/vue-pdf/blob/master/README.md

Install VuePDF using npm or yarn.

```sh
npm i @tato30/vue-pdf
yarn add @tato30/vue-pdf
```

--------------------------------

### Clone and Run vue-pdf Project

Source: https://github.com/tato30/vue-pdf/blob/master/README.md

Follow these commands to clone the vue-pdf repository, install dependencies, and run the development server for the project or its documentation.

```sh
# Clone the repository
git clone https://github.com/TaTo30/vue-pdf.git
# Change to code folder
cd vue-pdf
# Install node_modules
npm install
# Run code with hot reload
npm run dev
# Run docs
npm run dev:docs
```

--------------------------------

### Vue-PDF Full Example with Annotations

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/editor.md

This snippet shows a complete Vue.js component setup for using Vue-PDF with various annotation layers enabled. It includes importing necessary components and hooks, defining reactive state for annotation properties, and rendering different annotation types within the VuePDF component. Use this as a base for implementing interactive PDF editing features.

```vue
<script setup>
import { ref, useTemplateRef } from 'vue'
import {
  VuePDF,
  usePDF,
  PDFFreeTextAnnotation,
  PDFHighlightAnnotation,
  PDFInkAnnotation,
  PDFStampAnnotation,
  PDFCommentAnnotation,
} from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const { pdf } = usePDF('document.pdf')

const editorType = ref(0)
const color = ref('#2196F3')
const fontSize = ref(20)
const thickness = ref(20)
const opacity = ref(1.0)

const stamp = useTemplateRef('stamp')

function addImage() {
  stamp.value?.addStamp()
}

function onAltText(editor, callback) {
  const text = prompt('Enter alt text:')
  callback(text)
}

function onComment(editor, callback) {
  const text = prompt('Enter comment:')
  callback(text)
}
</script>

<template>
  <div>
    <VuePDF
      :pdf="pdf"
      text-layer
      annotation-layer
      editor-layer
      :editor-type="editorType"
    >
      <template #editors>
        <PDFFreeTextAnnotation :color="color" :fontSize="fontSize" />
        <PDFHighlightAnnotation :color="color" :thickness="thickness" />
        <PDFInkAnnotation :color="color" :thickness="thickness" :opacity="opacity" />
        <PDFStampAnnotation ref="stamp" @alt-text="onAltText" />
        <PDFCommentAnnotation @comment="onComment" />
      </template>
    </VuePDF>
  </div>
</template>
```

--------------------------------

### Install VuePDF with npm

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/introduction.md

Use npm to add the VuePDF package to your project.

```sh
npm i @tato30/vue-pdf
```

--------------------------------

### Install VuePDF with yarn

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/introduction.md

Use yarn to add the VuePDF package to your project.

```sh
yarn add @tato30/vue-pdf
```

--------------------------------

### Vue PDF Scaling Example

Source: https://github.com/tato30/vue-pdf/blob/master/docs/examples/basic/scale.md

Use this snippet to enable user-controlled scaling of the PDF. The 'scale' prop accepts a number, and the example shows how to bind it to reactive controls.

```vue
<script setup>
import { ref } from 'vue'
import { VuePDF, usePDF } from '@tato30/vue-pdf'

const scale = ref(1)
const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
</script>

<template>
  <div>
    <div>
      <button @click="scale = scale > 0.25 ? scale - 0.25 : scale">
        -
      </button>
      <span>{{ scale * 100 }}%</span>
      <button @click="scale = scale < 2 ? scale + 0.25 : scale">
        +
      </button>
    </div>
    <VuePDF :pdf="pdf" :scale="scale" />
  </div>
</template>
```

--------------------------------

### Create a Custom PDF Composable

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/composables.md

Example of creating a custom composable to load and manage a PDF document using pdf.js. Ensure the `pdf` prop receives a `PDFDocumentLoadingTask` object.

```vue
<script setup>
import { onMounted, ref } from 'vue'
import * as PDFJS from 'pdfjs-dist'

const pdf = ref()

function loadPDF() {
  const loadingTask = PDFJS.getDocument('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
  pdf.value = loadingTask
}

onMounted(() => {
  loadPDF()
})
</script>

<template>
  <div>
    <VuePDF :pdf="pdf" />
  </div>
</template>
```

--------------------------------

### Vue-PDF Loading Slot Example

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/slots.md

Use the default slot to render custom content while the PDF page is loading. This content will be replaced once the page is ready.

```vue
<template>
  <VuePDF :pdf="pdf">
    <div>
      Loading...
    </div>
  </VuePDF>
</template>
```

--------------------------------

### Setup VuePDF with Annotation Editor Layer

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/editor.md

Enables the annotation editor layer by setting `editor-layer` and `annotation-layer` props to true. Ensure `text-layer` is also true for proper editor functionality. Editor components should be placed within the `#editors` slot.

```vue
<script setup>
import { ref } from 'vue'
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const { pdf } = usePDF('document.pdf')
const editorType = ref(0)
</script>

<template>
  <VuePDF
    :pdf="pdf"
    text-layer
    annotation-layer
    editor-layer
    :editor-type="editorType"
  >
    <template #editors>
      <!-- Place editor components here -->
    </template>
  </VuePDF>
</template>
```

--------------------------------

### Vue-PDF Overlay Slot Example

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/slots.md

Utilize the '#overlay' slot to add content that appears on top of the rendered PDF page. Slot props provide the current page width and height.

```vue
<template>
  <VuePDF :pdf="pdf">
    <template #overlay="{ width, height }" >
      <div>
        Page size {{ width }}x{{ height }}
      </div>
    </template>
  </VuePDF>
</template>
```

--------------------------------

### Configure Free Text Annotation Editor

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/editor/freetext.md

Set up the Vue PDF viewer with the PDFFreeTextAnnotation component to enable free text annotations. This example shows basic usage with reactive color and font size.

```vue
<script setup>
import { ref } from 'vue'
import { VuePDF, usePDF, PDFFreeTextAnnotation } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const { pdf } = usePDF('document.pdf')
const color = ref('#2196F3')
const fontSize = ref(20)
</script>

<template>
  <VuePDF :pdf="pdf" text-layer annotation-layer editor-layer :editor-type="3">
    <template #editors>
      <PDFFreeTextAnnotation :color="color" :fontSize="fontSize" />
    </template>
  </VuePDF>
</template>
```

--------------------------------

### Vue PDF Text Highlighting Example

Source: https://github.com/tato30/vue-pdf/blob/master/docs/examples/text_events/text_highlight.md

This component demonstrates how to use the `VuePDF` component to highlight text. It includes an input field to dynamically change the text to be highlighted and configures options like case-insensitivity. The `onHighlight` function logs the event payload to the console, which contains detailed information about the highlighted text.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'
import { ref } from 'vue'

const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')

const highlightText = ref('Trace-based')
const highlightOptions = ref({
  completeWords: false,
  ignoreCase: true,
})

function onHighlight(value) {
  console.log(value)
}
</script>

<template>
  <div>
    <input v-model="highlightText">
    <VuePDF :pdf="pdf" text-layer :highlight-text="highlightText" :highlight-options="highlightOptions" @highlight="onHighlight" />
  </div>
</template>
```

--------------------------------

### Vue-PDF Ink Editor Configuration

Source: https://github.com/tato30/vue-pdf/blob/master/docs/examples/editor/ink.md

Configure the Ink Editor by setting its type and providing custom annotation tools. This example uses a select input for color, and range inputs for thickness and opacity.

```vue
<script setup>
import { ref } from 'vue'
import { VuePDF, usePDF, PDFInkAnnotation } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const { pdf } = usePDF('https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf')

const colorOptions = ['#F44336', '#2196F3', '#4CAF50', '#FF9800', '#9C27B0']
const color = ref('#F44336')
const thickness = ref(5)
const opacity = ref(1.0)
</script>

<template>
  <div>
    <div>
      <select v-model="color">
        <option v-for="c in colorOptions" :key="c" :value="c">{{ c }}</option>
      </select>
      <input v-model.number="thickness" type="range" min="1" max="40" />
      Thickness: {{ thickness }}
      <input v-model.number="opacity" type="range" min="0" max="1" step="0.05" />
      Opacity: {{ opacity }}
    </div>
    <VuePDF :pdf="pdf" text-layer annotation-layer editor-layer :editor-type="15">
      <template #editors>
        <PDFInkAnnotation :color="color" :thickness="thickness" :opacity="opacity" />
      </template>
    </VuePDF>
  </div>
</template>
```

--------------------------------

### Vue PDF Editor with Comment Functionality

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/editor/comment.md

Integrate PDFCommentAnnotation into your Vue PDF viewer to enable comment features. This example shows basic setup with event handlers for comment creation and removal.

```vue
<script setup>
import { VuePDF, usePDF, PDFCommentAnnotation } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const { pdf } = usePDF('document.pdf')

function onComment(editor, callback) {
  const text = prompt('Enter comment:')
  callback(text)
}

function onRemoved(editor) {
  console.log('Comment removed from editor:', editor)
}
</script>

<template>
  <VuePDF :pdf="pdf" text-layer annotation-layer editor-layer :editor-type="3">
    <template #editors>
      <PDFCommentAnnotation @comment="onComment" @removed="onRemoved" />
    </template>
  </VuePDF>
</template>
```

--------------------------------

### Enable Annotation Layer in Vue PDF

Source: https://github.com/tato30/vue-pdf/blob/master/docs/examples/basic/annotation_layer.md

Control the visibility of the annotation layer by toggling the `annotation-layer` prop. This example demonstrates how to dynamically enable or disable the annotation layer.

```vue
<script setup>
import { ref } from 'vue'
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const annotation_layer = ref(false)
const { pdf } = usePDF('example_014.pdf')
</script>

<template>
  <div>
    <div>
      <button @click="annotation_layer = !annotation_layer">
        Change to {{ !annotation_layer }}
      </button>
    </div>
    <VuePDF :pdf="pdf" :annotation-layer="annotation_layer" />
  </div>
</template>
```

--------------------------------

### Vue PDF Comment Editor Setup

Source: https://github.com/tato30/vue-pdf/blob/master/docs/examples/editor/comment.md

Set up the Vue PDF component with comment editing capabilities. This includes importing necessary components and defining event handlers for comment creation and removal. Ensure the 'editor-layer' and 'annotation-layer' props are enabled.

```vue
<script setup>
import { ref } from 'vue'
import {
  VuePDF,
  usePDF,
  PDFHighlightAnnotation,
  PDFCommentAnnotation,
} from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const { pdf } = usePDF('https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf')

const colorOptions = ['#FFEB3B', '#8BC34A', '#FFCBE6', '#F44336', '#2196F3']
const color = ref('#FFEB3B')
const thickness = ref(12)

function onComment(editor, callback) {
  const text = prompt('Enter comment:')
  callback(text)
}

function onRemoved(editor) {
  console.log('Comment removed from editor:', editor)
}
</script>

<template>
  <div>
    <div>
      <select v-model="color">
        <option v-for="c in colorOptions" :key="c" :value="c">{{ c }}</option>
      </select>
      <input v-model.number="thickness" type="range" min="1" max="40" />
      {{ thickness }}
    </div>
    <VuePDF :pdf="pdf" text-layer annotation-layer editor-layer :editor-type="9">
      <template #editors>
        <PDFHighlightAnnotation :color="color" :thickness="thickness" />
        <PDFCommentAnnotation @comment="onComment" @removed="onRemoved" />
      </template>
    </VuePDF>
  </div>
</template>
```

--------------------------------

### Vue-PDF Editors Slot Example

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/slots.md

The '#editors' slot is used to mount editor helper components when 'editor-layer' is enabled. This allows integration of annotation tools like PDFFreeTextAnnotation and PDFCommentAnnotation.

```vue
<template>
  <VuePDF
    :pdf="pdf"
    text-layer
    annotation-layer
    editor-layer
    :editor-type="editorType"
  >
    <template #editors>
      <PDFFreeTextAnnotation :color="color" :fontSize="20" />
      <PDFCommentAnnotation @comment="onComment" />
    </template>
  </VuePDF>
</template>
```

--------------------------------

### Vue Component for Stamp Annotation

Source: https://github.com/tato30/vue-pdf/blob/master/docs/examples/editor/stamp.md

This component demonstrates how to integrate and use the PDFStampAnnotation within a Vue application. It includes setup for PDF loading, template references, and a button to trigger adding a stamp. The `onAltText` function shows how to handle custom alt text prompts for stamps.

```vue
<script setup>
import { useTemplateRef } from 'vue'
import { VuePDF, usePDF, PDFStampAnnotation } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const { pdf } = usePDF('https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf')

const stamp = useTemplateRef('stamp')

function addStamp() {
  stamp.value?.addStamp()
}

function onAltText(editor, callback) {
  const text = prompt('Enter alt text for the image:')
  callback(text)
}
</script>

<template>
  <div>
    <div>
      <button @click="addStamp">Add Stamp</button>
    </div>
    <VuePDF :pdf="pdf" text-layer annotation-layer editor-layer :editor-type="13">
      <template #editors>
        <PDFStampAnnotation ref="stamp" @alt-text="onAltText" />
      </template>
    </VuePDF>
  </div>
</template>
```

--------------------------------

### Basic PDF Rendering

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/props.md

Renders a PDF document using the `pdf` prop, which should be a `PDFDocumentLoadingTask` obtained from usePDF.

```vue
<VuePDF :pdf="pdf" />
```

--------------------------------

### usePDF with Options

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/composables.md

Configure PDF loading with options like password, onPassword callback, onProgress callback, and onError handler. The `password` option is ignored if `onPassword` is provided.

```js
function onPassword(updatePassword, reason) {
  console.log(`Reason for callback: ${reason}`)
  updatePassword('password1234')
}

function onProgress({ loaded, total }) {
  console.log(`${loaded / total * 100}% Loaded`)
}

function onError(reason) {
  console.error(`PDF loading error: ${reason}`)
}

const { pdf, pages, info } = usePDF('sample.pdf', {
  password: 'password1234',
  onPassword,
  onProgress,
  onError
})
```

--------------------------------

### VuePDF with Text and Annotation Layers

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/introduction.md

Enable text and annotation layers for selection and interaction. Import the default CSS styles for correct rendering.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const { pdf } = usePDF('sample.pdf')
</script>

<template>
  <VuePDF :pdf="pdf" text-layer annotation-layer />
</template>
```

--------------------------------

### Toggle Text Layer in Vue PDF

Source: https://github.com/tato30/vue-pdf/blob/master/docs/examples/basic/text_layer.md

Use the `text-layer` prop to control the visibility of selectable text. This example shows how to bind it to a reactive boolean variable.

```vue
<script setup>
import { ref } from 'vue'
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const text_layer = ref(false)
const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
</script>

<template>
  <div>
    <div>
      <button @click="text_layer = !text_layer">
        Change to {{ !text_layer }}
      </button>
    </div>
    <VuePDF :pdf="pdf" :text-layer="text_layer" />
  </div>
</template>
```

--------------------------------

### Import PDFHighlightAnnotation

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/editor/highlight.md

Import the necessary component for highlight annotations.

```javascript
import { PDFHighlightAnnotation } from '@tato30/vue-pdf'
```

--------------------------------

### Basic VuePDF Usage

Source: https://github.com/tato30/vue-pdf/blob/master/README.md

Import and use VuePDF and usePDF for basic PDF rendering.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'

const { pdf } = usePDF('sample.pdf')
</script>

<template>
  <VuePDF :pdf="pdf" />
</template>
```

--------------------------------

### Enable Text and Annotation Layers

Source: https://github.com/tato30/vue-pdf/blob/master/README.md

Enable text and annotation layers for VuePDF and import the necessary CSS styles.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const { pdf } = usePDF('sample.pdf')
</script>

<template>
  <VuePDF :pdf="pdf" text-layer annotation-layer />
</template>
```

--------------------------------

### Minimal Build Configuration

Source: https://github.com/tato30/vue-pdf/blob/master/README.md

Configure the minimal build of VuePDF by manually setting the worker source. Ensure the worker script version matches the pdfjs-dist version.

```ts
import { GlobalWorkerOptions } from 'pdfjs-dist'
import { VuePDF, usePDF } from '@tato30/vue-pdf/minimal'

GlobalWorkerOptions.workerSrc = 'https://unpkg.com/pdfjs-dist@5.4.296/build/pdf.worker.min.mjs'

const { pdf } = usePDF('sample.pdf')
```

--------------------------------

### Vue PDF Table of Contents Implementation

Source: https://github.com/tato30/vue-pdf/blob/master/docs/examples/advanced/toc.md

This script sets up the PDF loading, outline extraction, and table of contents generation. It uses `usePDF` to load the PDF and `watchEffect` to process the outline data. The `onChapterClick` function handles navigation to a specific chapter.

```vue
<script setup>
import { ref, triggerRef, watchEffect } from 'vue'

import { VuePDF, usePDF } from '@tato30/vue-pdf'

import ChaptersList from './ChaptersList.vue'

const { pdf, info, getPDFDestination } = usePDF('/45.pdf')
const outlineTree = ref([])

watchEffect(() => {
  if (info.value.outline !== undefined) {
    outlineTree.value = info.value.outline.map(function convert(node) {
      return {
        title: node.title,
        destination: getPDFDestination(node.dest),
        items: node.items.map((item) => {
          return convert(item)
        }),
      }
    })
  }
})
triggerRef(info)

function onChapterClick(value) {
  value.then((v) => {
    console.log(v)
  })
}
</script>

<template>
  <div id="toc_wrapper">
    <div class="toc">
      <ChaptersList
        :items="outlineTree"
        @chapterClick="onChapterClick"
      />
    </div>
    <div class="container">
      <VuePDF :pdf="pdf" />
    </div>
  </div>
</template>
```

--------------------------------

### Load PDF with usePDF

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/composables.md

Use the `usePDF` composable to load a PDF document and prepare it for the `VuePDF` component. It returns reactive properties for the PDF, pages, and info.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'

const { pdf, pages, info } = usePDF('sample.pdf')
</script>

<template>
  <VuePDF :pdf="pdf" />
</template>
```

--------------------------------

### Minimal Build with Custom Worker

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/introduction.md

Use the minimal entry point for custom worker configuration. Set GlobalWorkerOptions.workerSrc before calling usePDF.

```ts
import { GlobalWorkerOptions } from 'pdfjs-dist'
import { VuePDF, usePDF } from '@tato30/vue-pdf/minimal'

GlobalWorkerOptions.workerSrc = 'https://unpkg.com/pdfjs-dist@5.4.296/build/pdf.worker.min.mjs'

const { pdf } = usePDF('sample.pdf')
```

--------------------------------

### Reactive PDF Loading with usePDF

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/composables.md

Make `usePDF` reactive by passing a `ref` for the source. Changes to the ref's value will automatically update the returned PDF, pages, and info.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'

// Changing currentPdf value will change pdf, pages and info values
const currentPdf = ref('sample.pdf')
const { pdf, pages, info } = usePDF(currentPdf)
</script>

<template>
  <VuePDF :pdf="pdf" />
</template>
```

--------------------------------

### Vue PDF with Text Watermark

Source: https://github.com/tato30/vue-pdf/blob/master/docs/examples/advanced/watermark.md

Use this component to display a PDF with a configurable text watermark. The watermark can be customized via input fields for text, color, columns, rows, rotation, and font size. Ensure the Vue PDF library is installed and imported.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import { ref } from 'vue'

const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')

const pdfRef = ref(null)
const watermarkText = ref('sample')
const watermarkOptions = ref({
  columns: 4,
  rows: 4,
  color: 'rgba(211, 210, 211, 0.8)',
  rotation: 45,
  fontSize: 18,
})

function reload() {
  pdfRef.value.reload()
}
</script>

<template>
  <div>
    <div>
      <input v-model="watermarkText">
      <input v-model="watermarkOptions.color">
      <input v-model="watermarkOptions.columns">
      <input v-model="watermarkOptions.rows">
      <input v-model="watermarkOptions.rotation">
      <input v-model="watermarkOptions.fontSize">
    </div>
    <VuePDF ref="pdfRef" :pdf="pdf" :watermark-text="watermarkText" :watermark-options="watermarkOptions" />
  </div>
</template>
```

--------------------------------

### VuePDF with XFA Forms Support

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/introduction.md

Enable XFA form support by setting enableXfa to true in the usePDF options. Ensure the CSS styles are imported.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const { pdf } = usePDF({
  url: '/xfa.pdf',
  enableXfa: true,
})
</script>

<template>
  <VuePDF :pdf="pdf" />
</template>
```

--------------------------------

### Render All PDF Pages

Source: https://github.com/tato30/vue-pdf/blob/master/docs/examples/basic/all_pages.md

Use the `usePDF` composable to load a PDF and then iterate through the `pages` array to render each page individually using the `VuePDF` component. Ensure the component is rendered on the client side using `<ClientOnly>`.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'

const { pdf, pages } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
</script>

<template>
  <div v-for="page in pages" :key="page">
    <VuePDF :pdf="pdf" :page="page" />
  </div>
</template>
```

--------------------------------

### Import PDFFreeTextAnnotation

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/editor/freetext.md

Import the necessary component for free text annotations.

```javascript
import { PDFFreeTextAnnotation } from '@tato30/vue-pdf'
```

--------------------------------

### Props

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/editor/freetext.md

Configuration options for the PDFFreeTextAnnotation component.

```APIDOC
## Props

### color

Type: `string` <br />
Required: `true`

The default color of the text annotation. Only values prefixed with `#`, `rgb` or `rgba` are supported.

```vue
<PDFFreeTextAnnotation color="#2196F3" />
```

### fontSize

Type: `number` <br />
Required: `true`

The font size of the text annotation in pixels.

```vue
<PDFFreeTextAnnotation :fontSize="20" />
```

::: info
Both `color` and `fontSize` props are reactive, changing their values will update the editor parameters for new annotations and selected annotations in layer.
:::
```

--------------------------------

### Specify Image Resources Path

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/props.md

Provide the `image-resources-path` to the location of necessary image assets for rendering specific PDF graphics. This ensures proper display of graphical elements.

```vue
<VuePDF :pdf="pdf" image-resources-path="https://unpkg.com/pdfjs-dist@latest/web/images/" />
```

--------------------------------

### Configure Vite for Top-Level Await

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/introduction.md

Add these settings to vite.config.js to enable top-level await support in your build environment. This resolves errors related to the target environment not supporting this feature.

```json
optimizeDeps: {
  esbuildOptions: {
    supported: {
      'top-level-await': true,
    },
  },
},
esbuild: {
  supported: {
    'top-level-await': true,
  },
}
```

--------------------------------

### Render XFA PDF with Vue-PDF

Source: https://github.com/tato30/vue-pdf/blob/master/docs/examples/basic/xfa_layer.md

Use the `usePDF` hook with `enableXfa: true` to load and prepare an XFA PDF for rendering. Ensure the PDF is rendered within a client-only component to avoid server-side rendering issues.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const { pdf } = usePDF({
  url: '/xfa.pdf',
  enableXfa: true,
})
</script>

<template>
  <div class="container">
    <VuePDF :pdf="pdf" />
  </div>
</template>
```

--------------------------------

### Handle Comment Creation Event

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/editor/comment.md

Implement the `onComment` function to handle the comment creation event. This function receives the editor instance and a callback to provide the comment text. Use `prompt` for a simple input, or a custom modal for a better user experience.

```javascript
function onComment(editor, callback) {
  const text = prompt('Enter your comment:')
  callback(text)
}
```

--------------------------------

### Configure Legacy Worker for Legacy Browsers

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/introduction.md

To support legacy browsers, configure `pdfjs-dist` to use its legacy worker. This involves importing `pdfjs-dist` and the legacy worker, then setting `PDFJS.GlobalWorkerOptions.workerSrc` before using `usePDF`.

```vue
<script setup lang="ts">
import * as PDFJS from 'pdfjs-dist'; // [!code ++]
import LegacyWorker from 'pdfjs-dist/legacy/build/pdf.worker.min?url'; // [!code ++]
import { VuePDF, usePDF } from '@tato30/vue-pdf';

PDFJS.GlobalWorkerOptions.workerSrc = LegacyWorker // [!code ++]

const { pdf } = usePDF(/** */)
</script>
```

--------------------------------

### Vue PDF Component with Annotation Event

Source: https://github.com/tato30/vue-pdf/blob/master/docs/examples/annotation_events/annotation_forms.md

This snippet shows how to use the VuePDF component and listen for annotation events. Import necessary components and functions, load a PDF, and define a handler for the '@annotation' event.

```vue
<script setup>
import { ref } from 'vue'
import { VuePDF, usePDF } from '@tato30/vue-pdf'

const { pdf } = usePDF('/14.pdf')
function onAnnotation(value) {
  console.log(value)
}
</script>

<template>
  <div>
    <VuePDF :pdf="pdf" annotation-layer @annotation="onAnnotation" />
  </div>
</template>
```

--------------------------------

### Import PDFStampAnnotation

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/editor/stamp.md

Import the PDFStampAnnotation component from the vue-pdf library.

```js
import { PDFStampAnnotation } from '@tato30/vue-pdf'
```

--------------------------------

### Configure Local wasmUrl for Offline Use

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/introduction.md

If your application runs offline, copy the wasm files from node_modules/pdfjs-dist/wasm to a static folder (e.g., public/wasm) and point wasmUrl to that relative path. This ensures the decoder assets are available locally.

```typescript
const { pdf } = usePDF({
  url: '/documents/sample.pdf',
  wasmUrl: '/wasm/',
})
```

--------------------------------

### Specify Page Number

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/props.md

Renders a specific page of the PDF document. The `page` prop accepts an integer and defaults to 1.

```vue
<VuePDF :pdf="pdf" :page="1" />
```

--------------------------------

### Configure Vite for Top-Level Await

Source: https://github.com/tato30/vue-pdf/blob/master/README.md

Add these settings to your vite.config.js to resolve 'Top-level await is not available' errors, especially when targeting older environments.

```javascript
optimizeDeps: {
  esbuildOptions: {
    supported: {
      'top-level-await': true,
    },
  },
},
esbuild: {
  supported: {
    'top-level-await': true,
  },
}
```

--------------------------------

### Listen for XFA Loaded Event

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/events.md

Use the `xfa-loaded` event to detect when an XFA page has finished rendering. This is useful for performing actions after the XFA content is ready.

```vue
<VuePDF :pdf="pdf" @xfa-loaded="onLoaded" />
```

--------------------------------

### Import PDFInkAnnotation Component

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/editor/ink.md

Import the PDFInkAnnotation component from the vue-pdf library.

```javascript
import { PDFInkAnnotation } from '@tato30/vue-pdf'
```

--------------------------------

### Import PDFCommentAnnotation Component

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/editor/comment.md

Import the PDFCommentAnnotation component from the vue-pdf library.

```javascript
import { PDFCommentAnnotation } from '@tato30/vue-pdf'
```

--------------------------------

### Display Single PDF Page in Vue

Source: https://github.com/tato30/vue-pdf/blob/master/docs/examples/basic/one_page.md

Use the `usePDF` hook to load a PDF and `VuePDF` component to display a specific page. Includes navigation controls for page turning.

```vue
<script setup>
import { ref } from 'vue'
import { VuePDF, usePDF } from '@tato30/vue-pdf'

const page = ref(1)
const { pdf, pages } = usePDF('https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf')
</script>

<template>
  <div>
    <div>
      <button @click="page = page > 1 ? page - 1 : page">
        Prev
      </button>
      <span>{{ page }} / {{ pages }}</span>
      <button @click="page = page < pages ? page + 1 : page">
        Next
      </button>
    </div>
    <VuePDF :pdf="pdf" :page="page" />
  </div>
</template>
```

--------------------------------

### Enable XFA Forms

Source: https://github.com/tato30/vue-pdf/blob/master/README.md

Enable XFA form support in VuePDF by setting the enableXfa option in usePDF.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const { pdf } = usePDF({
  url: '/xfa.pdf',
  enableXfa: true,
})
</script>

<template>
  <VuePDF :pdf="pdf" />
</template>
```

--------------------------------

### resizing Event

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/editor/stamp.md

Emitted continuously while a stamp annotation is being resized.

```APIDOC
## resizing Event

Emitted when a stamp annotation is being resized.

```vue
<PDFStampAnnotation ref="stamp" @resizing="onResizing" />
```

### Payload

```ts
{
  editor: AnnotationEditor,
  width: number,
  height: number
}
```
```

--------------------------------

### Import Annotation Editor Type Constants

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/editor.md

Import and use constants for annotation editor types from `pdfjs-dist` to set the `editor-type` prop.

```javascript
import { AnnotationEditorType } from 'pdfjs-dist'

// AnnotationEditorType.NONE      = 0
// AnnotationEditorType.FREETEXT  = 3
// AnnotationEditorType.HIGHLIGHT = 9
// AnnotationEditorType.STAMP     = 13
// AnnotationEditorType.INK       = 15
```

--------------------------------

### Vue PDF Component with Text Highlighting

Source: https://github.com/tato30/vue-pdf/blob/master/docs/examples/advanced/highlight_text.md

This component uses the `usePDF` hook to load a PDF and the `VuePDF` component to display it. Text highlighting is enabled via the `highlight-text` and `highlight-options` props, which are bound to reactive references for dynamic updates.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf';
import '@tato30/vue-pdf/style.css';
import { ref } from 'vue';

const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')

const highlightText = ref('javascript')
const highlightOptions = ref({
  completeWords: false,
  ignoreCase: true,
})
</script>

<template>
  <div>
    <div>
      <input v-model="highlightText">
      <input v-model="highlightOptions.completeWords" type="checkbox">
      <input v-model="highlightOptions.ignoreCase" type="checkbox">
    </div>
    <VuePDF :pdf="pdf" text-layer :highlight-text="highlightText" :highlight-options="highlightOptions" />
  </div>
</template>
```

--------------------------------

### Enable Annotation Layer with annotation-layer

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/props.md

Set the `annotation-layer` prop to `true` to enable the display of document annotations such as links and popups. This is a boolean prop.

```vue
<VuePDF :pdf="pdf" annotation-layer />
```

--------------------------------

### Basic Usage of PDFInkAnnotation

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/editor/ink.md

Integrate the PDFInkAnnotation component within the VuePDF template to enable freehand drawing. Ensure editor-layer is enabled and editor-type is set to 15.

```vue
<script setup>
import { ref } from 'vue'
import { VuePDF, usePDF, PDFInkAnnotation } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const { pdf } = usePDF('document.pdf')
const color = ref('#F44336')
const thickness = ref(5)
const opacity = ref(1.0)
</script>

<template>
  <VuePDF :pdf="pdf" text-layer annotation-layer editor-layer :editor-type="15">
    <template #editors>
      <PDFInkAnnotation :color="color" :thickness="thickness" :opacity="opacity" />
    </template>
  </VuePDF>
</template>
```

--------------------------------

### Vue Component for PDF Highlight Editor

Source: https://github.com/tato30/vue-pdf/blob/master/docs/examples/editor/highlight.md

This Vue component demonstrates how to integrate the PDFHighlightAnnotation for interactive highlighting. It includes controls for selecting highlight color and thickness. Ensure the '@tato30/vue-pdf/style.css' is imported for styling.

```vue
<script setup>
import { ref } from 'vue'
import { VuePDF, usePDF, PDFHighlightAnnotation } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const { pdf } = usePDF('https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf')

const colorOptions = ['#FFEB3B', '#8BC34A', '#FFCBE6', '#F44336', '#2196F3']
const color = ref('#FFEB3B')
const thickness = ref(12)
</script>

<template>
  <div>
    <div>
      <select v-model="color">
        <option v-for="c in colorOptions" :key="c" :value="c">{{ c }}</option>
      </select>
      <input v-model.number="thickness" type="range" min="1" max="40" />
      {{ thickness }}
    </div>
    <VuePDF :pdf="pdf" text-layer annotation-layer editor-layer :editor-type="9">
      <template #editors>
        <PDFHighlightAnnotation :color="color" :thickness="thickness" />
      </template>
    </VuePDF>
  </div>
</template>
```

--------------------------------

### Customize Highlighting with highlight-options

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/props.md

Configure text highlighting behavior using the `highlight-options` prop, which accepts an object. This prop is available from v1.9.

```vue
<VuePDF :pdf="pdf" text-layer highlight-text="javascript" :highlight-options="{
    completeWords: true,
    ignoreCase: false
  }"
/>
```

--------------------------------

### Custom Highlight Color Options

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/editor/highlight.md

Define and apply custom color options for the highlight annotation editor. Note that these options can only be set during initialization.

```vue
<script setup>
const customColors = {
  yellow: ['#FFEB3B', '#FFFFCC'],
  green: ['#8BC34A', '#53FFBC'],
  orange: ['#FF9800', '#FFD180'],
}
</script>

<PDFHighlightAnnotation :color-options="customColors" />
```

--------------------------------

### Vue Component for Multiple PDFs

Source: https://github.com/tato30/vue-pdf/blob/master/docs/examples/advanced/multiple_pdf.md

This component loads multiple PDF sources and allows switching between them. It uses `ref` for reactive variables and `usePDF` hook to load the PDF. Ensure you have PDF files or accessible URLs to use.

```vue
<script setup>
import { VuePDF, usePDF } from '@tato30/vue-pdf' 
import { ref } from 'vue'

const pdfSources = [
  '/14.pdf',
  '/36.pdf',
  '/41.pdf',
  '/45.pdf',
  'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
]
// Setting the first (or default) PDF
const pdfSource = ref(pdfSources[0])
const pdfSourceIdx = ref(0)

const { pdf } = usePDF(pdfSource)

function nextPdf() {
  pdfSourceIdx.value += 1
  if (pdfSourceIdx.value >= pdfSources.length)
    pdfSourceIdx.value = 0
  pdfSource.value = pdfSources[pdfSourceIdx.value]
}
</script>

<template>
  <div>
    <div>
      <button @click="nextPdf">
        Next PDF (Current index: {{ pdfSourceIdx }})
      </button>
    </div>
    <VuePDF :pdf="pdf" />
  </div>
</template>
```

--------------------------------

### Basic Usage of PDFHighlightAnnotation

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/editor/highlight.md

Integrate the PDFHighlightAnnotation component within the VuePDF template to enable highlight editing with custom color and thickness.

```vue
<script setup>
import { ref } from 'vue'
import { VuePDF, usePDF, PDFHighlightAnnotation } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const { pdf } = usePDF('document.pdf')
const color = ref('#FFEB3B')
const thickness = ref(12)
</script>

<template>
  <VuePDF :pdf="pdf" text-layer annotation-layer editor-layer :editor-type="9">
    <template #editors>
      <PDFHighlightAnnotation :color="color" :thickness="thickness" />
    </template>
  </VuePDF>
</template>
```

--------------------------------

### Configure Legacy Worker for Vue PDF

Source: https://github.com/tato30/vue-pdf/blob/master/README.md

Use this snippet to configure the legacy worker for supporting older browsers. Ensure this is set before using the usePDF hook.

```vue
<script setup lang="ts">
+ import * as PDFJS from 'pdfjs-dist'; 
+ import LegacyWorker from 'pdfjs-dist/legacy/build/pdf.worker.min?url'; 
import { VuePDF, usePDF } from '@tato30/vue-pdf';

+ PDFJS.GlobalWorkerOptions.workerSrc = LegacyWorker 

const { pdf } = usePDF(/** */)
</script>
```

--------------------------------

### Listen for Annotation Interactions

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/events.md

The `annotation` event is triggered when a user interacts with any annotation in the PDF. The event data structure varies based on the annotation type.

```vue
<VuePDF :pdf="pdf" @annotation="onAnnotation" />
```

--------------------------------

### Enable Annotation Editor Layer

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/editor.md

Use the `editor-layer` prop to enable the annotation editor layer. This prop is a boolean and defaults to false.

```vue
<VuePDF :pdf="pdf" editor-layer />
```

--------------------------------

### Handle Text Highlight Event

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/events.md

The `highlight` event is emitted when text is searched and found on a page. It returns a list of matches, the page number, and associated text data.

```vue
<VuePDF :pdf="pdf" @highlight="onHighlight" />
```

--------------------------------

### PDFInkAnnotation Props

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/editor/ink.md

Configuration options for the PDFInkAnnotation component, including color, thickness, and opacity of the ink stroke. All props are reactive.

```APIDOC
## Props

### color

Type: `string` <br />
Required: `true`

The color of the ink stroke.

```vue
<PDFInkAnnotation color="#F44336" :thickness="5" :opacity="1.0" />
```

### thickness

Type: `number` <br />
Required: `true`

The thickness of the ink stroke in pixels.

```vue
<PDFInkAnnotation color="#F44336" :thickness="5" :opacity="1.0" />
```

### opacity

Type: `number` <br />
Required: `true`

The opacity of the ink stroke, a value between `0` and `1`.

```vue
<PDFInkAnnotation color="#F44336" :thickness="5" :opacity="0.5" />
```
```

--------------------------------

### VuePDF Loaded Event

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/events.md

Emitted when the page has finished rendering. The payload contains the page's data.

```vue
<VuePDF :pdf="pdf" @loaded="onLoaded" />
```

--------------------------------

### Set Rendering Intent

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/props.md

Controls the rendering intent for the PDF page. Supported values are 'display', 'print', or 'any', with 'display' as the default.

```vue
<VuePDF :pdf="pdf" intent="print" />
```

--------------------------------

### Handle Alt Text Event

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/editor/stamp.md

Implement the onAltText function to handle the altText event emitted by PDFStampAnnotation. This function prompts the user for alt text and passes it to the callback for accessibility.

```vue
<PDFStampAnnotation ref="stamp" @alt-text="onAltText" />
```

```js
function onAltText(editor, callback) {
  const text = prompt('Enter alt text for the image:')
  callback(text)
}
```

--------------------------------

### Vue PDF Annotation Component

Source: https://github.com/tato30/vue-pdf/blob/master/docs/examples/annotation_events/annotation_attachment.md

This component sets up the VuePDF viewer with annotation layer enabled and listens for annotation events.

```vue
<script setup>
import { ref } from 'vue'
import { VuePDF, usePDF } from '@tato30/vue-pdf'

const { pdf } = usePDF('/41.pdf')
function onAnnotation(value) {
  console.log(value)
}
</script>

<template>
  <div>
    <VuePDF :pdf="pdf" annotation-layer image-resources-path="https://unpkg.com/pdfjs-dist@latest/web/images/" @annotation="onAnnotation" />
  </div>
</template>
```

--------------------------------

### dragging Event

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/editor/stamp.md

Emitted continuously while a stamp annotation is being dragged across the PDF.

```APIDOC
## dragging Event

Emitted when a stamp annotation is being dragged.

```vue
<PDFStampAnnotation ref="stamp" @dragging="onDragging" />
```

### Payload

```ts
{
  editor: AnnotationEditor,
  x: number,
  y: number
}
```
```

--------------------------------

### Enable Annotation Editor Layer

Source: https://github.com/tato30/vue-pdf/blob/master/README.md

Enable the annotation editor layer in VuePDF and use the PDFFreeTextAnnotation component within the editors slot.

```vue
<script setup>
import { ref } from 'vue'
import { VuePDF, usePDF, PDFFreeTextAnnotation } from '@tato30/vue-pdf'
import '@tato30/vue-pdf/style.css'

const { pdf } = usePDF('sample.pdf')
const editorType = ref(3)
</script>

<template>
  <VuePDF :pdf="pdf" text-layer annotation-layer editor-layer :editor-type="editorType">
    <template #editors>
      <PDFFreeTextAnnotation color="#2196F3" :fontSize="20" />
    </template>
  </VuePDF>
</template>
```

--------------------------------

### Handle Free Text Annotation Dragging

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/editor/freetext.md

Listen for the 'dragging' event to be notified when a free text annotation is being moved. The event payload includes the editor instance and the annotation's coordinates.

```vue
<PDFFreeTextAnnotation @dragging="onDragging" />
```

--------------------------------

### Handle Resizing Event

Source: https://github.com/tato30/vue-pdf/blob/master/docs/guide/editor/stamp.md

Attach an event listener to the 'resizing' event of PDFStampAnnotation to track the stamp's dimensions while it's being resized. The event payload includes the editor instance and the new width/height.

```vue
<PDFStampAnnotation ref="stamp" @resizing="onResizing" />
```