### Vue PDF Viewer Setup (TypeScript Options API)

Source: https://docs.vue-pdf-viewer.dev/instance-api/search-controller

This snippet demonstrates initializing the VPdfViewer component using the Options API in TypeScript. It sets up reactive references for PDF viewer state and search functionality, leveraging the `@vue-pdf-viewer/viewer` package.

```vue
<script lang="ts">
  import { VPdfViewer } from '@vue-pdf-viewer/viewer';
  import { computed, defineComponent, ref } from 'vue'

export default defineComponent({
  components: { VPdfViewer },
  setup() {
    // Create a ref to hold the VPdfViewer component
    const vpvRef = ref<InstanceType<typeof VPdfViewer>>()
    const searchValue = ref<string>('')

```

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

### Vue PDF Viewer Component Logic (JavaScript)

Source: https://docs.vue-pdf-viewer.dev/instance-api/search-controller

This snippet defines the setup logic for a Vue.js component that integrates with a PDF viewer. It manages state for search queries, match positions, and viewer interactions using Vue's Composition API (ref, computed). It includes methods for performing searches, navigating to next/previous matches, and handling form submissions. The `vpvRef` is used to get a reference to the `VPdfViewer` component, allowing direct access to its methods and properties.

```javascript
import { VPdfViewer } from '@vue-pdf-viewer/viewer';
import { computed, ref } from 'vue'

export default {
  components: { VPdfViewer },
  setup() {
    // Create a ref to hold the VPdfViewer component
    const vpvRef = ref(null)
    const searchValue = ref('')
    const currentMatchPosition = ref(0)
    const searchControl = computed(() => vpvRef.value?.searchControl)
    const searching = computed(() => searchControl?.value?.searching?.value)
    const totalMatches = computed(() => searchControl?.value?.searchMatches?.totalMatches)
    
    const nextSearchMatch = () => {
      searchControl.value?.nextSearchMatch()
    }
    const prevSearchMatch = () => {
      searchControl.value?.prevSearchMatch()
    }
    const search = (event) => {
      event.preventDefault()
      searchControl.value?.search(searchValue.value)
    }
    const goToMatch = (position) => {
      if (totalMatches?.value && position <= totalMatches.value) {
        searchControl.value?.goToMatch(position)
      }
    }
    const handleGoToMatch = (event) => {
      event.preventDefault()
      goToMatch(currentMatchPosition.value)
    }
    return {
      vpvRef,
      searchValue,
      searching,
      currentMatchPosition,
      totalMatches,
      searchControl,
      nextSearchMatch,
      prevSearchMatch,
      search,
      handleGoToMatch
    }
  },
  data() {
    return {
      pdfFileSource:
        'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
    }
  }
}
```

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

### Vue PDF Viewer: Setup and Rotation (Options API - TypeScript)

Source: https://docs.vue-pdf-viewer.dev/tutorial/customizing-toolbar

This snippet shows the setup and rotation controls for the VPdfViewer component using Vue's Options API with TypeScript. It registers the component, initializes the PDF source in the data, and defines methods for rotating the PDF and getting the current rotation status. It relies on '@vue-pdf-viewer/viewer'.

```vue
<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer';

export default {
  components: {
    VPdfViewer
  },
    
  data() {
    return {
      samplePDF: 'your-pdf.pdf',
      vpvRef: null,
    };
  },
    
  methods: {
    rotateClockwise() {
      this.$refs.vpvRef.rotateControl.rotateClockwise();
    },
      
    rotateCounterClockwise() {
      this.$refs.vpvRef.rotateControl.rotateCounterclockwise();
    },
      
    getCurrentRotation() {
      return this.$refs.vpvRef.rotateControl.currentRotation;
    }
  }
};
</script>

<template>
  <VPdfViewer ref="vpvRef" :src="samplePDF" />
</template>
```

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

### Vue PDF Viewer with Navigation (Options API TS)

Source: https://docs.vue-pdf-viewer.dev/instance-api/page-controller

This example utilizes the VPdfViewer component with Vue 2/3's Options API and TypeScript. It defines components, setup function for reactivity, and exports methods for page navigation and event handling, similar to the Composition API approach. The '@vue-pdf-viewer/viewer' package is a prerequisite.

```vue
<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed, defineComponent } from 'vue'

export default defineComponent({
  components: { VPdfViewer },
  setup() {
    // Create a ref to hold the VPdfViewer component
    const vpvRef = ref<InstanceType<typeof VPdfViewer>>()
    const pageControl = computed(() => vpvRef.value?.pageControl)

    const nextPage = () => {
      const isLastPage = pageControl.value?.currentPage === pageControl.value?.totalPages
      if (isLastPage) {
        return
      }
      pageControl.value?.goToPage(pageControl.value?.currentPage + 1)
    }

    const prevPage = () => {
      const isFirstPage = pageControl.value?.currentPage === 1
      if (isFirstPage) {
        return
      }
      pageControl.value?.goToPage(pageControl.value?.currentPage - 1)
    }

    const onPageChanged = (page: number) => {
      console.log('Current page is: ', page)
    }

    return {
      vpvRef,
      nextPage,
      prevPage,
      onPageChanged
    }
  }
})
</script>

<template>
  <div id="vpv">
    <div>
      <button @click="prevPage">Prev</button>
    </div>
    <div>
      <button @click="nextPage">Next</button>
    </div>
    <div :style="{ width: '100%', height: '100%' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
        @pageChanged="onPageChanged"
      />
    </div>
  </div>
</template>
<style scoped>
#vpv {
  width: 100%;
  height: 1490px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  #vpv {
    width: 85%;
  }
}
@media (max-width: 1028px) {
  #vpv {
    width: 70%;
  }
}
</style>
```

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

### Vue PDF Viewer: Basic Setup and Component Instance

Source: https://docs.vue-pdf-viewer.dev/tutorial/creating-your-own-toolbar

Illustrates the fundamental setup for using the `VPdfViewer` component in a Vue application. It shows how to create a reference to the component instance and expose it for use in other parts of the setup function.

```vue
<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed, defineComponent, unref } from 'vue'

export default defineComponent({
  components: { VPdfViewer },
  setup() {
    const vpvRef = ref<InstanceType<typeof VPdfViewer> | null>(null)
    
    // Other computed properties and methods would follow...

    return {
      vpvRef
    }
  }
})
</script>
```

```javascript
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed, defineComponent, unref } from 'vue'

export default defineComponent({
  components: { VPdfViewer },
  setup() {
    const vpvRef = ref(null)
    
    // Other computed properties and methods would follow...

    return {
      vpvRef
    }
  }
})
```

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

### Vue PDF Viewer: Extract Text (Options API JS)

Source: https://docs.vue-pdf-viewer.dev/instance-api/page-controller

This example showcases the VPdfViewer component within a Vue.js Options API structure using plain JavaScript. It defines the necessary refs and computed properties in the setup function and exposes them to the template for functionality like text extraction. This requires the '@vue-pdf-viewer/viewer' package.

```vue
<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed } from 'vue'

export default {
  components: { VPdfViewer },
  setup() {
    // Create a ref to hold the VPdfViewer component
    const vpvRef = ref()
    const pageControl = computed(() => vpvRef.value?.pageControl)
    const pageNumber = ref(1)

    const extractText = async () => {
      if (!pageControl.value) return

      try {
        const content = await pageControl.value.getTextContent(pageNumber.value)
        console.log(content)
      } catch (error) {
        console.error('Error extracting text:', error)
      }
    }

    return {
      vpvRef,
      pageControl,
      pageNumber,
      extractText
    }
  }
}
</script>

<template>
  <div id="vpv">
    <div>
      <label>
        Page Number:
        <input
          v-model.number="pageNumber"
          type="number"
          :min="1"
          :max="pageControl?.totalPages || 1"
        />
      </label>
      <button @click="extractText">
        Extract Current Page Text
      </button>
    </div>
    <div :style="{ width: '100%', height: '600px' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
```

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

### Vue PDF Viewer with Navigation (Options API JS)

Source: https://docs.vue-pdf-viewer.dev/instance-api/page-controller

This snippet demonstrates the VPdfViewer component using Vue's Options API with plain JavaScript. It includes basic setup for the viewer, page control logic, and event handling for page changes. This code requires the '@vue-pdf-viewer/viewer' package to be installed.

```vue
<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed } from 'vue'

export default {
  components: { VPdfViewer },
  setup() {
    // Create a ref to hold the VPdfViewer component
    const vpvRef = ref()
    const pageControl = computed(() => vpvRef.value?.pageControl)

    const nextPage = () => {

```

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

### Install @vue-pdf-viewer/annotation Plugin using Package Managers

Source: https://docs.vue-pdf-viewer.dev/annotation-plugin/getting-started

Install the annotation plugin for Vue PDF Viewer using your preferred package manager. Ensure you have @vue-pdf-viewer/viewer (version >=3.0.0) installed and a Vue 3 or Nuxt application.

```bash
bun add @vue-pdf-viewer/annotation
```

```bash
npm install @vue-pdf-viewer/annotation
```

```bash
pnpm install @vue-pdf-viewer/annotation
```

```bash
yarn add @vue-pdf-viewer/annotation
```

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

### Install Vue PDF Viewer using Bun

Source: https://docs.vue-pdf-viewer.dev/introduction/getting-started

Installs the Vue PDF Viewer package using the Bun package manager. This is a straightforward command to add the library to your project's dependencies.

```shell
bun add @vue-pdf-viewer/viewer
```

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

### Vue PDF Viewer: Setup and Rotation (Options API - JavaScript)

Source: https://docs.vue-pdf-viewer.dev/tutorial/customizing-toolbar

This snippet illustrates the setup and rotation functionalities of the VPdfViewer component using Vue's Options API in plain JavaScript. It includes component registration, data initialization for the PDF source, and methods to manage PDF rotation (clockwise, counter-clockwise) and retrieve the current rotation. The '@vue-pdf-viewer/viewer' package is a dependency.

```vue
<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer';

export default {
  components: {
    VPdfViewer
  },
    
  data() {
    return {
      samplePDF: 'your-pdf.pdf',
      vpvRef: null,
    };
  },
    
  methods: {
    rotateClockwise() {
      this.$refs.vpvRef.rotateControl.rotateClockwise();
    },
      
    rotateCounterClockwise() {
      this.$refs.vpvRef.rotateControl.rotateCounterclockwise();
    },
      
    getCurrentRotation() {
      return this.$refs.vpvRef.rotateControl.currentRotation;
    }
  }
};
</script>
<template>
  <VPdfViewer ref="vpvRef" :src="samplePDF" />
</template>
```

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

### Vue PDF Viewer: Extract Text (Options API TS)

Source: https://docs.vue-pdf-viewer.dev/instance-api/page-controller

This example shows the VPdfViewer integration using Vue.js Options API with TypeScript. It defines components, sets up refs within the setup function, and makes page control and text extraction logic available in the template. The '@vue-pdf-viewer/viewer' package is a dependency.

```vue
<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed, defineComponent } from 'vue'

export default defineComponent({
  components: { VPdfViewer },
  setup() {
    // Create a ref to hold the VPdfViewer component
    const vpvRef = ref<InstanceType<typeof VPdfViewer>>()
    const pageControl = computed(() => vpvRef.value?.pageControl)
    const pageNumber = ref<number>(1)

    const extractText = async () => {
      if (!pageControl.value) return

      try {
        const content = await pageControl.value.getTextContent(pageNumber.value)
        console.log(content)
      } catch (error) {
        console.error('Error extracting text:', error)
      }
    }

    return {
      vpvRef,
      pageControl,
      pageNumber,
      extractText
    }
  }
})
</script>

<template>
  <div id="vpv">
    <div>
      <label>
        Page Number:
        <input
          v-model.number="pageNumber"
          type="number"
          :min="1"
          :max="pageControl?.totalPages || 1"
        />
      </label>
      <button @click="extractText">
        Extract Current Page Text
      </button>
    </div>
    <div :style="{ width: '100%', height: '600px' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
```

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

### Configure PDF Loading Options in Vue (JavaScript Setup)

Source: https://docs.vue-pdf-viewer.dev/component-api/interfaces

Shows how to configure PDF loading options using plain JavaScript with the Vue Composition API. It imports the VPdfViewer component, defines the PDF source and options, and passes them to the VPdfViewer. Dependencies include '@vue-pdf-viewer/viewer'.

```vue
<script setup>
import { VPdfViewer } from "@vue-pdf-viewer/viewer";

const pdfFileSource =
  "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";

const documentOptions = {
  rangeChunkSize: 131072, // 128 KB
  disableStream: false,
  disableAutoFetch: false
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      :src="pdfFileSource"
      :document-options="documentOptions"
    />
  </div>
</template>
```

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

### Setup VPdfViewer Component

Source: https://docs.vue-pdf-viewer.dev/tutorial/highlighting-multiple-keywords

Initializes the VPdfViewer component to display a PDF document. The 'src' prop specifies the PDF file, and the 'ref' attribute allows programmatic interaction with the viewer for features like highlighting.

```vue
<VPdfViewer ref="vpvRef" :src="pdfFile" />
```

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

### Vue PDF Viewer Setup and Logic

Source: https://docs.vue-pdf-viewer.dev/tutorial/creating-your-own-toolbar

This Vue.js script setup defines the core logic for a PDF viewer component. It uses `ref` and `computed` to manage viewer state, including current page, total pages, and search results. It provides methods for navigating between pages and handling key presses for page input. Dependencies include the `VPdfViewer` component from '@vue-pdf-viewer/viewer' and Vue's composition API.

```vue
<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed, defineComponent } from 'vue'

export default defineComponent({
  components: { VPdfViewer },
  setup() {
    const vpvRef = ref(null)
    
    const pageControl = computed(() => vpvRef.value?.pageControl)
    const currentPageInput = computed(() => pageControl.value?.currentPage)
    const searchControl = computed(() => vpvRef.value?.searchControl)
    const totalMatches = computed(() => searchControl.value?.searchMatches?.totalMatches)
    
    const isNextPageButtonDisable = computed(() => 
      pageControl.value?.currentPage === pageControl.value?.totalPages
    )
    
    const isPreviousPageButtonDisable = computed(() => 
      pageControl.value?.currentPage === 1
    )

    const prevPage = () => {
      const isFirstPage = pageControl.value?.currentPage === 1
      if (isFirstPage) return
      pageControl.value?.goToPage(pageControl.value?.currentPage - 1)
    }

    const nextPage = () => {
      const isLastPage = pageControl.value?.currentPage === pageControl.value?.totalPages
      if (isLastPage) return
      pageControl.value?.goToPage(pageControl.value?.currentPage + 1)
    }

    const handleKeyPress = (event) => {
      if (event.key === "Enter") {
        handlePageInput(event)
      }
    }

    return {
      vpvRef,
      pageControl,
      currentPageInput,
      searchControl,
      totalMatches,
      prevPage,
      nextPage,
      handleKeyPress,
      isNextPageButtonDisable,
      isPreviousPageButtonDisable
    }
  }
})
</script>
```

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

### Configure PDF Loading Options in Vue (TypeScript Setup)

Source: https://docs.vue-pdf-viewer.dev/component-api/interfaces

Demonstrates how to configure PDF loading options using TypeScript with the Vue Composition API. It imports necessary components and types, defines PDF source and options, and passes them to the VPdfViewer. Dependencies include '@vue-pdf-viewer/viewer'.

```vue
<script setup lang="ts">
import { VPdfViewer, type PDFDocumentOptions } from "@vue-pdf-viewer/viewer";

const pdfFileSource =
  "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";

const documentOptions: PDFDocumentOptions = {
  rangeChunkSize: 131072, // 128 KB
  disableStream: false,
  disableAutoFetch: false
};
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      :src="pdfFileSource"
      :document-options="documentOptions"
    />
  </div>
</template>
```

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

### Vue PDF Viewer Highlighting with Options API (TS)

Source: https://docs.vue-pdf-viewer.dev/instance-api/highlight-controller

This snippet demonstrates how to implement PDF text highlighting using the VPdfViewer component within Vue 3's Options API and TypeScript. It defines components, refs, computed properties, and watchers within the `setup` function, returning them to be used in the template.

```vue
<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed, defineComponent, watch } from 'vue'

export default defineComponent({
  components: { VPdfViewer },
  setup() {
    // Create a ref to hold the VPdfViewer component
    const vpvRef = ref<InstanceType<typeof VPdfViewer>>()
    const highlightControl = computed(() => vpvRef.value?.highlightControl)

    const highlight = () => {
      highlightControl.value?.highlight([
        {
          keyword: "Dynamic",
          highlightColor: "rgba(255,0,255,0.5)",
          options: { matchCase: true, wholeWords: true },
        },
        {
          // This regular expression matches the word "time" in a case-insensitive manner
          keyword: /time/gi,
          highlightColor: "rgba(255,50,0,0.5)",
        }
      ])
    }

    const clearHighlight = () => {
      highlightControl.value?.clear()
    }

    watch(
      vpvRef,
      (vpvInstance) => {
        if (!vpvInstance) return
        // Initiate the highlight
        highlight()
      }
    )
    
    return {
      vpvRef,
      clearHighlight
    }
  }
})
</script>

<template>
  <div id="vpv">
    <div>
      <button @click="clearHighlight">Clear Highlight</button>
    </div>
    <div :style="{ width: '100%', height: '100%' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
<style scoped>
#vpv {
  width: 100%;
  height: 1490px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  #vpv {
    width: 85%;
  }
}
@media (max-width: 1028px) {
  #vpv {
    width: 70%;
  }
}
</style>
```

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

### Vue PDF Viewer with Search (JavaScript Composition API)

Source: https://docs.vue-pdf-viewer.dev/instance-api/search-controller

This example shows the VPdfViewer component usage with the Composition API in plain JavaScript. It mirrors the TypeScript version, providing search and navigation features for PDF documents loaded via the `@vue-pdf-viewer/viewer` package.

```vue
<script setup>
  import { VPdfViewer } from '@vue-pdf-viewer/viewer';
  import { ref } from 'vue';

  // Create a ref to hold the VPdfViewer component
  const vpvRef = ref(null);
  const searchValue = ref('')
  const currentMatchPosition = ref(0)
  const searchControl = computed(() => vpvRef.value?.searchControl)
  const searching = computed(() => searchControl?.value?.searching?.value)
  const totalMatches = computed(() => searchControl?.value?.searchMatches?.totalMatches)
  
  const nextSearchMatch = () => {
    searchControl.value?.nextSearchMatch()
  }
  const prevSearchMatch = () => {
    searchControl.value?.prevSearchMatch()
  }
  const search = (event) => {
    event.preventDefault()
    searchControl.value?.search(searchValue.value)
  }
  const goToMatch = (position) => {
    if (totalMatches?.value && position <= totalMatches.value) {
      searchControl.value?.goToMatch(position)
    }
  }
  const handleGoToMatch = (event) => {
    event.preventDefault()
    goToMatch(currentMatchPosition.value)
  }
</script>
<template>
  <div id="vpv">
    <form @submit="search">
      <input v-model="searchValue" />
      <button type="submit" :disabled="searching">Search</button>
    </form>
    <div>
      Searching: {{ searching }}
    </div>
    <div>
      TotalSearchMatch: {{ totalMatches }}
    </div>
    <form @submit="handleGoToMatch">
      <label>
        Go to match
        <input v-model="currentMatchPosition" type="number" min="1" :max="totalMatches" />
      </label>
      <button type="submit" :disabled="!totalMatches">Go!</button>
    </form>
    <div>
      <button @click="nextSearchMatch" :disabled="!totalMatches">next</button>
    </div>
    <div>
      <button @click="prevSearchMatch" :disabled="!totalMatches">prev</button>
    </div>
    <div :style="{ width: '100%', height: '100%' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
<style scoped>
#vpv {
  width: 100%;
  height: 1490px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  #vpv {
    width: 85%;
  }
}
@media (max-width: 1028px) {
  #vpv {
    width: 70%;
  }
}
</style>
```

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

### Import and Utilize Annotation Plugin in Vue PDF Viewer (Options API)

Source: https://docs.vue-pdf-viewer.dev/annotation-plugin/getting-started

Shows how to integrate the VPdfAnnotationPlugin with VPdfViewer using Vue's Options API. This involves importing necessary components and plugins, and passing the plugin instance to the 'plugins' prop. Requires Vue 3 and the @vue-pdf-viewer/viewer package.

```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() {
    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>
```

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

### Set VPdfViewer Locale and Localization Props (Vue)

Source: https://docs.vue-pdf-viewer.dev/tutorial/adding-a-custom-localization

This snippet shows the basic setup for defining a custom locale and providing localization data directly within the VPdfViewer component's template. It's a starting point for custom translations.

```vue
<VPdfViewer locale="customLang" :localization="{ customLang: { .... } }" />
```

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

### Vue PDF Viewer with Search (TypeScript Composition API)

Source: https://docs.vue-pdf-viewer.dev/instance-api/search-controller

This example demonstrates how to use the VPdfViewer component with the Composition API in TypeScript. It includes functionality for searching text within the PDF, navigating through search results, and displaying the total number of matches. It relies on the `@vue-pdf-viewer/viewer` package.

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

  // Create a ref to hold the VPdfViewer component
  const vpvRef = ref<InstanceType<typeof VPdfViewer>>();
  const searchValue = ref<string>('')
  const currentMatchPosition = ref(0)
  const searchControl = computed(() => vpvRef.value?.searchControl)
  const searching = computed(() => searchControl?.value?.searching?.value)
  const totalMatches = computed(() => searchControl?.value?.searchMatches?.totalMatches)
  
  const nextSearchMatch = () => {
    searchControl.value?.nextSearchMatch()
  }
  const prevSearchMatch = () => {
    searchControl.value?.prevSearchMatch()
  }
  const search = (e: Event) => {
    e.preventDefault()
    searchControl.value?.search(searchValue.value)
  }
  const goToMatch = (position: number) => {
    if (totalMatches?.value && position <= totalMatches.value) {
      searchControl.value?.goToMatch(position)
    }
  }
  const handleGoToMatch = (event: Event) => {
    event.preventDefault()
    goToMatch(currentMatchPosition.value)
  }
</script>
<template>
  <div id="vpv">
    <form @submit="search">
      <input v-model="searchValue" />
      <button type="submit" :disabled="searching">Search</button>
    </form>
    <div>
      Searching: {{ searching }}
    </div>
    <div>
      TotalSearchMatch: {{ totalMatches }}
    </div>
    <form @submit="handleGoToMatch">
      <label>
        Go to match
        <input v-model="currentMatchPosition" type="number" min="1" :max="totalMatches" />
      </label>
      <button type="submit" :disabled="!totalMatches">Go!</button>
    </form>
    <div>
      <button @click="nextSearchMatch" :disabled="!totalMatches">next</button>
    </div>
    <div>
      <button @click="prevSearchMatch" :disabled="!totalMatches">prev</button>
    </div>
    <div :style="{ width: '100%', height: '100%' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
<style scoped>
#vpv {
  width: 100%;
  height: 1490px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  #vpv {
    width: 85%;
  }
}
@media (max-width: 1028px) {
  #vpv {
    width: 70%;
  }
}
</style>
```

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

### Custom Portuguese Localization (Vue Options API JS)

Source: https://docs.vue-pdf-viewer.dev/tutorial/adding-a-custom-localization

This example demonstrates implementing custom Portuguese (pt_PT) localization for VPdfViewer using the Options API with plain JavaScript. The localization details are configured within the component's `data` object.

```vue
<script>
import { defineComponent } from "vue";
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
    
export default defineComponent({
  components: { VPdfViewer },
  data() {
    return {
      samplePDF: "/sample.pdf",
      customLang: "pt_PT",
    } 
  }
})
</script>

<template>
    <VPdfViewer
      :src="samplePDF"
      locale="customLang"
      :localization="{
        customLang: {
          firstPageLabel: 'Ir para a primeira página',
          lastPageLabel: 'Última página',

```

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

### Configure Custom Highlight Colors in Vue PDF Viewer Annotation (TypeScript Script Setup)

Source: https://docs.vue-pdf-viewer.dev/annotation-plugin/interfaces

This example demonstrates how to configure custom highlight colors for the annotation plugin in Vue PDF Viewer using the `<script setup>` syntax with TypeScript. It imports necessary components and defines an array of color objects for highlighting. The `colors` array accepts objects with `label` and `value` properties, where `value` can be a named color, a hex code, or a hex code with opacity.

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

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

### Vue License Initialization (Global Plugin)

Source: https://docs.vue-pdf-viewer.dev/tutorial/making-vue-pdf-viewer-reusable

Provides an alternative method for Vue license initialization using a global plugin. This approach is cleaner for larger projects, abstracting the license setup into a dedicated plugin file (`plugins/pdf-viewer.ts`) and then registering it with the Vue app.

```typescript
// plugins/pdf-viewer.ts
import { useLicense } from '@vue-pdf-viewer/viewer'

export default {
  install: () => {
    useLicense('Your VPV Domain Token')
  }
}

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import PdfViewerPlugin from './plugins/pdf-viewer'

const app = createApp(App)
app.use(PdfViewerPlugin)
app.mount('#app')
```

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

### Import and Utilize Annotation Plugin in Vue PDF Viewer (Composition API)

Source: https://docs.vue-pdf-viewer.dev/annotation-plugin/getting-started

Demonstrates how to import the VPdfAnnotationPlugin and pass it to the 'plugins' prop of the VPdfViewer component using Vue 3's Composition API. Requires Vue 3 and the @vue-pdf-viewer/viewer package.

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

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

### Handle Annotation Updates in Vue with TypeScript (Options API)

Source: https://docs.vue-pdf-viewer.dev/annotation-plugin/usage-guide/handling-annotations-with-callback-functions

Provides an example of handling the `onAnnotationUpdated` event using TypeScript with Vue's Options API. Annotations are processed and logged within the `created` hook and `methods`. This setup requires the same dependencies: `@vue-pdf-viewer/viewer` and `@vue-pdf-viewer/annotation`.

```typescript
<script lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import VPdfAnnotationPlugin, { type Annotation, AnnotationType } from '@vue-pdf-viewer/annotation'
import { defineComponent } from 'vue';

export default defineComponent({
  components: { VPdfViewer },
  data() {
    return {
      annotationPlugin: {} as ReturnType<
        typeof VPdfAnnotationPlugin
      >,
    };
  },
  created() {
    this.annotationPlugin = VPdfAnnotationPlugin({
      onAnnotationUpdated: (data: Annotation) => {
        const { annotationType } = data
        switch (annotationType) {
          case AnnotationType.Highlight:
            this.handleUpdatedHighlightAnnotation(data)
            break;
          case AnnotationType.FreeText:
            this.handleUpdatedFreeTextAnnotation(data)
            break;
          case AnnotationType.Stamp:
            this.handleUpdatedImageAnnotation(data)
            break;
          default:
            break;
        }
      }
    });
  },
  methods: {
    handleUpdatedHighlightAnnotation(data: Annotation) {
      console.log('Updated Highlight Annotation', data)
    },
    handleUpdatedFreeTextAnnotation(data: Annotation) {
      console.log('Updated FreeText Annotation', data)
    },
    handleUpdatedImageAnnotation(data: Annotation) {
      console.log('Updated Image Annotation', data)
    },
  },
});
</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 PDF Viewer Highlighting with Composition API (JS)

Source: https://docs.vue-pdf-viewer.dev/instance-api/highlight-controller

This snippet demonstrates the same PDF highlighting functionality as the TypeScript version but uses plain JavaScript with Vue 3's Composition API. It allows developers to implement PDF highlighting without needing a TypeScript setup, providing flexibility in project configuration.

```vue
<script setup>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed, watch } from 'vue'

// Create a ref to hold the VPdfViewer component
const vpvRef = ref()
const highlightControl = computed(() => vpvRef.value?.highlightControl)

const highlight = () => {
  highlightControl.value?.highlight([
    {
      keyword: "Dynamic",
      highlightColor: "rgba(255,0,255,0.5)",
      options: { matchCase: true, wholeWords: true },
    },
    {
      // This regular expression matches the word "time" in a case-insensitive manner
      keyword: /time/gi,
      highlightColor: "rgba(255,50,0,0.5)",
    }
  ])
}

const clearHighlight = () => {
  highlightControl.value?.clear()
}

watch(
  vpvRef,
  (vpvInstance) => {
    if (!vpvInstance) return
    // Initiate the highlight
    highlight()
  }
)
</script>

<template>
  <div id="vpv">
    <div>
      <button @click="clearHighlight">Clear highlight</button>
    </div>
    <div :style="{ width: '100%', height: '100%' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
<style scoped>
#vpv {
  width: 100%;
  height: 1490px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  #vpv {
    width: 85%;
  }
}
@media (max-width: 1028px) {
  #vpv {
    width: 70%;
  }
}
</style>
```

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

### Access Vue PDF Viewer Instance with ref (TypeScript Setup)

Source: https://docs.vue-pdf-viewer.dev/tutorial/creating-your-own-toolbar

Access the Vue PDF Viewer instance using Vue.js `ref` in a TypeScript setup script. This allows you to interact with the Viewer's API for custom control implementation. It requires importing `VPdfViewer` and declaring a ref to hold the instance.

```vue
<script lang="ts" setup>
import { VPdfViewer } from '@vue-pdf-viewer/viewer';
    
const vpvRef = ref<InstanceType<typeof VPdfViewer>>();
</script>

<template>
  <VPdfViewer ref="vpvRef" />
</template>
```

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

### Configure CharacterMap with Local Path in Vue (Composition API TS)

Source: https://docs.vue-pdf-viewer.dev/component-api/interfaces

This example shows how to configure the CharacterMap for VPdfViewer by pointing to a local CMaps directory. It uses the Composition API with TypeScript and assumes CMaps are in the 'public/cmaps/' folder.

```vue
<script setup lang="ts">
import { VPdfViewer } from "@vue-pdf-viewer/viewer";

const pdfFileSource =
  "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      :src="pdfFileSource"
      :character-map="{
        url: '/cmaps/',
        isCompressed: true,
      }"
    />
  </div>
</template>
```

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

### Install Canvas Dependencies for Apple M Series

Source: https://docs.vue-pdf-viewer.dev/introduction/getting-started

Installs necessary canvas dependencies using Homebrew for Apple M series chips. This is required because the default version of pdfjs-dist in Vue PDF Viewer depends on the 'canvas' package, which needs these system libraries.

```bash
$ brew install pkg-config cairo pango
```

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

### Vue: Prop Precedence with v-bind

Source: https://docs.vue-pdf-viewer.dev/tutorial/adding-a-custom-localization

Demonstrates how the order of props, especially when using v-bind, affects value overriding in Vue components. Example A preserves explicit props, while Example B shows how defaultProps can override explicitly set localization values if v-bind is placed last.

```vue
<script setup>
import { ref } from 'vue';

const customLang = ref("pt_PT");
    
const defaultProps = ref({
  localization: {
    overriddenLang: {
      handToolLabel: 'Overridden Hand Tool Label',
      firstPageLabel: 'Overridden First Page Label',
    },
  },
});
</script>

<!-- Example A: Explicit props are preserved, as v-bind comes first -->
<VPdfViewer
  v-bind="defaultProps"
  locale="customLang"
  :localization="{
    customLang: {
      handToolLabel: 'Ativar ferramenta de mão',
      firstPageLabel: 'Ir para a primeira página',
    },
  }"
/>

<!-- Example B: Explicit props may be overridden by defaultProps, as v-bind comes last -->
<VPdfViewer
  locale="customLang"
  :localization="{
    customLang: {
      handToolLabel: 'Ativar ferramenta de mão',
      firstPageLabel: 'Ir para a primeira página',
    },
  }"
  v-bind="defaultProps"
/>
```

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

### Configure CharacterMap with Local Path in Vue (Options API TS)

Source: https://docs.vue-pdf-viewer.dev/component-api/interfaces

This example illustrates configuring the CharacterMap for VPdfViewer with a local CMaps directory using the Options API and TypeScript. CMaps should be placed in the 'public/cmaps/' folder.

```vue
<script lang="ts">
import { defineComponent } from "vue";
import { VPdfViewer } from "@vue-pdf-viewer/viewer";

export default defineComponent({
  components: { VPdfViewer },
  data() {
    return {
      pdfFileSource:
        "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf",
    };
  },
});
</script>
<template>
  <div :style="{ width: '1028px', height: '700px' }">
    <VPdfViewer
      :src="pdfFileSource"
      :character-map="{
        url: '/cmaps/',
        isCompressed: true,
      }"
    />
  </div>
</template>
```

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

### Configure Custom Highlight Colors in Vue PDF Viewer Annotation (JavaScript Script Setup)

Source: https://docs.vue-pdf-viewer.dev/annotation-plugin/interfaces

This example shows how to set custom highlight colors for the Vue PDF Viewer annotation plugin using the `<script setup>` syntax with JavaScript. It imports the required components and defines the `annotationPlugin` with a custom `colors` array. Each color object in the array has a `label` and a `value`, supporting various color formats like named colors, hex codes, and hex codes with alpha transparency.

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

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

### Import VPdfViewer in Vue 3 (Options API)

Source: https://docs.vue-pdf-viewer.dev/introduction/basic-usage

Illustrates how to import and utilize the VPdfViewer component within a Vue 3 project using the Options API. This example includes setting the PDF source via component data.

```vue
<script>
  import { VPdfViewer } from '@vue-pdf-viewer/viewer';
  
  export default {
    components: { VPdfViewer },
    data() {
      return {
        src: "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      }
    }
  }
</script>
<template>
  <VPdfViewer :src="src" />
</template>
```

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

### Vue PDF Viewer Rotation Control (Options API, TS)

Source: https://docs.vue-pdf-viewer.dev/instance-api/rotate-controller

This example demonstrates using the VPdfViewer component with the Options API in TypeScript. It sets up refs and computed properties within the `setup` function to manage PDF rotation and display the current rotation state. The '@vue-pdf-viewer/viewer' package is a dependency.

```vue
<script lang="ts">
  import { VPdfViewer } from '@vue-pdf-viewer/viewer';
  import { computed, defineComponent, ref } from 'vue'

export default defineComponent({
  components: { VPdfViewer },
  setup() {
    // Create a ref to hold the VPdfViewer component
    const vpvRef = ref<InstanceType<typeof VPdfViewer>>()
    const rotateControl = computed(() => vpvRef.value?.rotateControl)
    const currentRotate = computed(() => {
      return rotateControl.value?.currentRotation
    })

    const rotateClockwise = () => {
      if (!rotateControl.value) {
        return
      }
      rotateControl.value.rotateClockwise()
    }

    const rotateCounterClockwise = () => {
      if (!rotateControl.value) {
        return
      }
      rotateControl.value.rotateCounterclockwise()
    }
    return {
      vpvRef,
      currentRotate,
      rotateClockwise,
      rotateCounterClockwise
    }
  }
})
</script>
<template>
  <div id="vpv">
    <div>
      <button @click="rotateClockwise">clockwise</button>
    </div>
    <div>
      <button @click="rotateCounterClockwise">counterclockwise</button>
    </div>
    <div>
      <p>currentRotate{{ currentRotate }}</p>
    </div>
    <div :style="{ width: '100%', height: '100%' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
<style scoped>
#vpv {
  width: 100%;
  height: 1490px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  #vpv {
    width: 85%;
  }
}
@media (max-width: 1028px) {
  #vpv {
    width: 70%;
  }
}
</style>
```