### Install Pdfvuer for Vue 2

Source: https://github.com/arkokoley/pdfvuer/blob/master/README.md

Use this command to install the library for Vue 2 projects.

```bash
npm install --save pdfvuer
```

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

### Install Pdfvuer for Vue 3

Source: https://github.com/arkokoley/pdfvuer/blob/master/README.md

Use this command to install the library for Vue 3 projects. Ensure you use the '@next' tag.

```bash
npm i pdfvuer@next --save
```

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

### Public static methods

Source: https://github.com/arkokoley/pdfvuer/blob/master/README.md

Static methods available on the PDFVuer class.

```APIDOC
## Public static methods

### createLoadingTask(src)
- **Parameters**:
  - `src`: see `:src` prop
- **Description**: This function creates a PDFJS loading task that can be used and reused as `:src` property.
```

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

### Basic Pdfvuer Usage in Vue

Source: https://github.com/arkokoley/pdfvuer/blob/master/README.md

A basic Vue component demonstrating how to use the Pdfvuer component to display a PDF. Includes a loading template. The 'pdfjs-dist/build/pdf.worker.entry' import is not needed since v1.9.1.

```vue
<template>
  <pdf src="./static/relativity.pdf" :page="1">
    <template slot="loading">
      loading content here...
    </template>
  </pdf>
</template>

<script>
import pdf from 'pdfvuer'
import 'pdfjs-dist/build/pdf.worker.entry' // not needed since v1.9.1

export default {
  components: {
    pdf
  }
}
</script>
```

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

### Properties

Source: https://github.com/arkokoley/pdfvuer/blob/master/README.md

Configuration options for the PDFVuer component.

```APIDOC
## Properties

### :resize
- **Type**: Boolean
- **Default**: false
- **Description**: Enable Auto Resizing on window resize. By default, autoresizing is disabled.

### :annotation
- **Type**: Boolean
- **Default**: false
- **Description**: Show the annotations in the pdf. By default, annotation layer is disabled.

### :text
- **Type**: Boolean
- **Default**: true
- **Description**: Show the text layer in the pdf. By default, text layer is enabled.
```

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

### Events

Source: https://github.com/arkokoley/pdfvuer/blob/master/README.md

Event handlers that can be triggered by the PDFVuer component.

```APIDOC
## Events

### @numpages
- **Type**: Number
- **Description**: The total number of pages of the pdf.

### @loading
- **Type**: Boolean
- **Description**: The provided PDF's loading state.

### @error
- **Type**: Function
- **Description**: Function handler for errors occurred during loading/drawing PDF source.

### @link-clicked
- **Type**: Function
- **Description**: Function handler for errors occurred during loading/drawing PDF source.

#### Example
```js
handle_pdf_link: function (params) {
  // Scroll to the appropriate place on our page - the Y component of
  // params.destArray * (div height / ???), from the bottom of the page div
  var page = document.getElementById(String(params.pageNumber));
  page.scrollIntoView();
}
```
```

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

### PDF Vuer Props

Source: https://github.com/arkokoley/pdfvuer/blob/master/README.md

The PDF Vuer component accepts several props to control its functionality, including the source of the PDF, page number, rotation, and scaling.

```APIDOC
## Props

### :src 
*Type*: String / Object
*Default*: ''
*Description*: The url of the pdf file. `src` may also be a `string|TypedArray|DocumentInitParameters|PDFDataRangeTransport` for more details, see [`PDFJS.getDocument()`](https://github.com/mozilla/pdf.js/blob/880093377160614073217330880032613945819d/src/display/api.js#L117).

### :page 
*Type*: Number
*Default*: 1
*Description*: The page number to display.

### :rotate 
*Type*: Number
*Default*: 0
*Description*: The page rotation in degrees, only multiple of 90 are valid.

### :scale 
*Type*: Number / String
*Default*: 'page-width'
*Description*: The scaling factor. By default, the pdf will be scaled to match the page width with the container width. When passed value `page-width` and / or using `resize` prop, will send back the scale computed accordingly via `update:scale` event (use it with `scale.sync="scale"`).
```

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

### Advanced PDF Viewer Component

Source: https://github.com/arkokoley/pdfvuer/blob/master/README.md

This Vue.js component provides a full-featured PDF viewer with page navigation, zoom controls, and link handling. It requires the 'pdfvuer' library and 'pdfjs-dist/build/pdf.worker.entry'. The component dynamically loads a PDF and updates the UI based on scroll position and user interactions.

```vue
<template>
  <div id="pdfvuer">
    <div id="buttons" class="ui grey three item inverted bottom fixed menu transition hidden">
      <a class="item" @click="page > 1 ? page-- : 1">
        <i class="left chevron icon">
        </i>
        Back
      </a>
      <a class="ui active item">
        {{page}} / {{ numPages ? numPages : '∞' }}
      </a>
      <a class="item" @click="page < numPages ? page++ : 1">
        Forward
        <i class="right chevron icon">
        </i>
      </a>
    </div>
    <div id="buttons" class="ui grey three item inverted bottom fixed menu transition hidden">
      <a class="item" @click="scale -= scale > 0.2 ? 0.1 : 0">
        <i class="left chevron icon" />
          Zoom -
      </a>
      <a class="ui active item">
        {{ formattedZoom }} %
      </a>
      <a class="item" @click="scale += scale < 2 ? 0.1 : 0">
        Zoom +
        <i class="right chevron icon" />
      </a>
    </div>
    <pdf :src="pdfdata" v-for="i in numPages" :key="i" :id="i" :page="i"
      :scale.sync="scale" style="width:100%;margin:20px auto;"
        :annotation="true"
        :resize="true"
        @link-clicked="handle_pdf_link">
      <template slot="loading">
        loading content here...
      </template>
    </pdf>
  </div>
</template>

<script>
import pdfvuer from 'pdfvuer'
import 'pdfjs-dist/build/pdf.worker.entry' // not needed since v1.9.1

export default {
  components: {
    pdf: pdfvuer
  },
  data () {
    return {
      page: 1,
      numPages: 0,
      pdfdata: undefined,
      errors: [],
      scale: 'page-width'
    }
  },
  computed: {
    formattedZoom () {
        return Number.parseInt(this.scale * 100);
    },
  },
  mounted () {
    this.getPdf()
  },
  watch: {
    show: function (s) {
      if(s) {
        this.getPdf();
      }
    },
    page: function (p) {
      if( window.pageYOffset <= this.findPos(document.getElementById(p)) || ( document.getElementById(p+1) && window.pageYOffset >= this.findPos(document.getElementById(p+1)) )) {
        // window.scrollTo(0,this.findPos(document.getElementById(p)));
        document.getElementById(p).scrollIntoView();
      }
    }
  },
  methods: {
    handle_pdf_link: function (params) {
      // Scroll to the appropriate place on our page - the Y component of
      // params.destArray * (div height / ???), from the bottom of the page div
      var page = document.getElementById(String(params.pageNumber));
      page.scrollIntoView();
    },
    getPdf () {
      var self = this;
      self.pdfdata = pdfvuer.createLoadingTask('./static/relativity.pdf');
      self.pdfdata.then(pdf => {
        self.numPages = pdf.numPages;
        window.onscroll = function() { 
          changePage() 
          stickyNav()  
        }

        // Get the offset position of the navbar
        var sticky = $('#buttons')[0].offsetTop

        // Add the sticky class to the self.$refs.nav when you reach its scroll position. Remove "sticky" when you leave the scroll position
        function stickyNav() {
          if (window.pageYOffset >= sticky) {
            $('#buttons')[0].classList.remove("hidden")
          } else {
            $('#buttons')[0].classList.add("hidden")
          }
        }

        function changePage () {
          var i = 1, count = Number(pdf.numPages);
          do {
            if(window.pageYOffset >= self.findPos(document.getElementById(i)) && 
                window.pageYOffset <= self.findPos(document.getElementById(i+1))) {
              self.page = i
            }
            i++
          } while ( i < count)
          if (window.pageYOffset >= self.findPos(document.getElementById(i))) {
            self.page = i
          }
        }
      });
    },
    findPos(obj) {
      return obj.offsetTop;
    }
  }
}
</script>
<style src="pdfvuer/dist/pdfvuer.css"></style>
<style lang="css" scoped>
  #buttons {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Page content */
  .content {
    padding: 16px;
  }
</style>
```

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

### Handle PDF Link Click Event

Source: https://github.com/arkokoley/pdfvuer/blob/master/README.md

Use this handler to manage clicks on links within the PDF. It scrolls the page to the appropriate location based on the link's destination.

```js
handle_pdf_link: function (params) {
      // Scroll to the appropriate place on our page - the Y component of
      // params.destArray * (div height / ???), from the bottom of the page div
      var page = document.getElementById(String(params.pageNumber));
      page.scrollIntoView();
    }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.