### Install Vue PDF Viewer

Source: https://context7_llms

Instructions for installing the Vue PDF Viewer component using various package managers like bun, npm, pnpm, and yarn. It also mentions additional dependencies for Apple M-series machines.

```bash
# Using bun (recommended)
bun add @vue-pdf-viewer/viewer

# Or using other package managers
npm install @vue-pdf-viewer/viewer
pnpm add @vue-pdf-viewer/viewer
yarn add @vue-pdf-viewer/viewer
```

```bash
# Special Setup for Apple M Series
brew install pkg-config cairo pango
```

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

### Vue PDF Viewer License Implementation

Source: https://context7_llms

Provides an example of how to import and use the `useLicense` hook from the '@vue-pdf-viewer/viewer' package to apply a license key.

```javascript
// main.js or app entry point
import { useLicense } from '@vue-pdf-viewer/viewer';

// Set license key
useLicense('your-license-key-here');
```

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

### Vue Dynamic PDF Loading Example

Source: https://context7_llms

Demonstrates dynamically loading different PDF files into the VPdfViewer component using Vue's Composition API, including loading states and event handling.

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

const pdfSource = ref('');
const isLoading = ref(false);

const loadPdf = async (url) => {
  isLoading.value = true;
  try {
    pdfSource.value = url;
  } catch (error) {
    console.error('Failed to load PDF:', error);
  }
};

const onLoadComplete = (pdfInfo) => {
  isLoading.value = false;
  console.log(`Loaded PDF: ${pdfInfo.filename}, Pages: ${pdfInfo.pageCount}`);
};
</script>

<template>
  <div class="pdf-container">
    <div class="pdf-controls">
      <button @click="loadPdf('/documents/report1.pdf')">Load Report 1</button>
      <button @click="loadPdf('/documents/report2.pdf')">Load Report 2</button>
    </div>
    
    <div v-if="isLoading" class="loading">Loading PDF...</div>
    
    <VPdfViewer 
      v-if="pdfSource"
      :src="pdfSource"
      @loaded="onLoadComplete"
      @load-error="(error) => console.error('Load error:', error)"
      class="pdf-viewer"
    />
  </div>
</template>
```

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

### Vue PDF Viewer Slot Usage Example

Source: https://context7_llms

Provides an example of customizing the Vue PDF Viewer component using slots. It shows how to replace default icons like 'iconPrint' and create custom controls for the 'zoomTool'.

```vue
<VPdfViewer :src="pdfSource">
  <template #iconPrint>
    <span>🖨️</span>
  </template>
  
  <template #zoomTool="{ currentScale, zoom }">
    <div class="custom-zoom-controls">
      <button @click="zoom(currentScale - 0.1)">-</button>
      <span>{{ Math.round(currentScale * 100) }}%</span>
      <button @click="zoom(currentScale + 0.1)">+</button>
    </div>
  </template>
</VPdfViewer>
```

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

### Configure Toolbar Options

Source: https://context7_llms

Demonstrates how to configure the viewer's toolbar by passing a `toolbar-options` prop to the VPdfViewer component. This example disables several toolbar features while enabling search, zoom, and page navigation.

```vue
<VPdfViewer
  :src="pdfSource"
  :toolbar-options="{
    sidebarEnable: false,
    themeSwitchable: false,
    downloadable: false,
    printable: false,
    fullscreen: false,
    searchable: true,
    zoomable: true,
    pageable: true
  }" 
/>
```

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

### Vue PDF Viewer Instance API Controllers

Source: https://context7_llms

Demonstrates how to access and use programmatic controls for the VPdfViewer component via its ref. It specifically shows examples for the Page Controller, including navigating to a page and retrieving current page information.

```javascript
const pdfViewerRef = ref();

// Navigate to specific page
pdfViewerRef.value.pageControl?.goToPage(5);

// Get current page info
const currentPage = pdfViewerRef.value.pageControl?.currentPage;
const totalPages = pdfViewerRef.value.pageControl?.totalPages;
```

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

### Print Controller Actions

Source: https://context7_llms

Initiate and manage the printing process for the PDF document. Allows starting a print job with options for visible progress, canceling ongoing jobs, and handling print events like progress, completion, and errors.

```javascript
const printCtrl = pdfViewerRef.value.printControl;

// Start printing
printCtrl?.print({ visibleDefaultProgress: true });

// Cancel print job
printCtrl?.cancel();

// Event handlers
printCtrl.onProgress = (progress) => {
  console.log(`Print progress: ${progress}%`);
};

printCtrl.onComplete = () => {
  console.log('Print completed');
};

printCtrl.onError = (error) => {
  console.error('Print error:', error);
};
```

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

### Apply Dark Mode Styling

Source: https://context7_llms

Shows how to apply dark mode styles by targeting the `.dark-mode` class combined with the viewer's variable scope. This example adjusts toolbar background, container border color, and text color for a dark theme.

```css
:deep(.vpv-variables.dark-mode) {
  --vpv-toolbar-background-color: rgba(45, 45, 45, 1);
  --vpv-container-border-color: rgba(255, 255, 255, 0.2);
  --vpv-text-color: rgba(255, 255, 255, 0.9);
}
```

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

### Nuxt.js Client-Side Integration

Source: https://context7_llms

Guides users on integrating the Vue PDF Viewer into a Nuxt.js application, emphasizing that the viewer does not support Server-Side Rendering (SSR). It recommends using a `.client.vue` file suffix for components that rely on browser-specific APIs.

```vue
<!-- PdfViewer.client.vue -->
<template>
  <VPdfViewer :src="pdfSource" />
</template>

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

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

### Customize Styling with CSS Variables

Source: https://context7_llms

Illustrates how to override default styling for the PDF viewer component using CSS custom properties. This example targets container borders, border-radius, breakpoints, toolbar background, height, and typography.

```css
:deep(.vpv-variables) {
  /* Container styling */
  --vpv-container-border-color: rgba(0, 0, 0, 0.3);
  --vpv-container-border-radius: 8px;
  --vpv-container-width-sm: 768px; /* Mobile breakpoint */
  
  /* Toolbar styling */
  --vpv-toolbar-background-color: rgba(226, 230, 233, 1);
  --vpv-toolbar-height: 48px;
  
  /* Typography */
  --vpv-font-family: 'Arial', Helvetica, sans-serif;
  --vpv-font-size: 14px;
  
  /* Colors */
  --vpv-primary-color: #007bff;
  --vpv-secondary-color: #6c757d;
  --vpv-success-color: #28a745;
  --vpv-danger-color: #dc3545;
  --vpv-warning-color: #ffc107;
  --vpv-info-color: #17a2b8;
}
```

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

### Rotate Controller Actions

Source: https://context7_llms

Rotate the document clockwise or counterclockwise. Provides functionality to get the current rotation angle of the document.

```javascript
const rotateCtrl = pdfViewerRef.value.rotateControl;

// Rotate document
rotateCtrl?.rotateClockwise();
rotateCtrl?.rotateCounterclockwise();

// Get current rotation
const rotation = rotateCtrl?.currentRotation; // 0, 90, 180, or 270
```

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

### Customize Mobile Breakpoints

Source: https://context7_llms

Provides examples for customizing mobile responsiveness. The first snippet shows how to disable mobile view entirely by setting the small container width breakpoint to 0. The second snippet demonstrates adjusting the breakpoint to a custom value, like 640px.

```css
/* Disable mobile view entirely */
:deep(.vpv-variables) {
  --vpv-container-width-sm: 0px;
}

/* Customize mobile breakpoint */
:deep(.vpv-variables) {
  --vpv-container-width-sm: 640px;
}
```

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

### Download Controller Actions

Source: https://context7_llms

Initiate the download of the PDF document. Includes event handlers for download completion and errors.

```javascript
const downloadCtrl = pdfViewerRef.value.downloadControl;

// Download PDF
downloadCtrl?.download();

// Event handlers
downloadCtrl.onComplete = () => {
  console.log('Download completed');
};

downloadCtrl.onError = (error) => {
  console.error('Download error:', error);
};
```

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

### Vue PDF Viewer Basic Usage (Composition API)

Source: https://context7_llms

Demonstrates the basic usage of the VPdfViewer component in a Vue 3 application using the Composition API. It shows how to import the component and render it with a PDF source.

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

<template>
  <div :style="{ width: '1028px', height: '700px'}">
    <VPdfViewer src="https://example.com/sample.pdf" />
  </div>
</template>
```

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

### Vue PDF Viewer Basic Usage (Options API)

Source: https://context7_llms

Illustrates how to use the VPdfViewer component in a Vue 3 application with the Options API. It covers importing the component and binding the PDF source via data properties.

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

export default {
  components: { VPdfViewer },
  data() {
    return {
      src: "https://example.com/sample.pdf"
    }
  }
}
</script>

<template>
  <VPdfViewer :src="src" />
</template>
```

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

### Vue PDF Viewer Component API

Source: https://context7_llms

Comprehensive API documentation for the VPdfViewer component, detailing its available props, emitted events, and customizable slots. Props cover source, theming, zoom, rotation, and localization. Events track loading, page changes, and rotation. Slots allow customization of icons and tools.

```APIDOC
VPdfViewer Component API:

Props:
- src: `string | Ref<string>` - PDF document source URL or file path (required)
- darkMode: `v-model:boolean` - Enable dark theme mode (default: `false`)
- textLayer: `boolean` - Enable text selection layer (default: `true`)
- initialScale: `number | ZoomLevel` - Initial zoom level on load (default: `ZoomLevel.PageFit`)
- initialRotation: `number` - Initial rotation angle (0, 90, 180, 270) (default: `0`)
- locale: `v-model:string` - Localization language string (default: `en_US`)
- toolbarOptions: `Partial<ToolbarOptions>` - Toolbar feature visibility settings (default: `{}`)

Events:
- loaded: Fired when PDF finishes loading. Parameters: PDF properties (filename, pageCount, etc.).
- loadProgress: Loading progress updates. Parameters: Loading percentage (0-100).
- loadError: Error occurred during loading. Parameters: Error details and message.
- pageChanged: Current page number changed. Parameters: New current page number.
- rotate: PDF document was rotated. Parameters: Direction and current rotation angle.
- 'update:darkMode': Dark mode state changed. Parameters: Boolean indicating dark mode status.

Slots:
- Icon Customization:
  - iconPrint: Custom print icon
  - iconDownload: Custom download icon
  - iconFullScreen: Custom fullscreen icon
  - iconZoomIn: Custom zoom in icon
  - iconZoomOut: Custom zoom out icon
  - iconThemeDark: Custom dark theme icon
  - iconThemeLight: Custom light theme icon
- Tool Customization:
  - dropFileZone: Custom file drop area
  - downloadTool: Custom download tool component
  - fullScreenTool: Custom fullscreen tool component
  - loader: Custom loading component
  - pageNavigationTool: Custom page navigation component
  - zoomTool: Custom zoom control component
```

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

### ToolbarOptions Interface

Source: https://context7_llms

Defines the configuration options for the viewer's toolbar, allowing control over the visibility and functionality of elements like sidebar, theme switch, download, print, search, zoom, and pagination.

```typescript
interface ToolbarOptions {
  sidebarEnable?: boolean;
  themeSwitchable?: boolean;
  downloadable?: boolean;
  printable?: boolean;
  fullscreen?: boolean;
  searchable?: boolean;
  zoomable?: boolean;
  pageable?: boolean;
}
```

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

### Print PDF with Custom Configuration

Source: https://context7_llms

This Vue.js component demonstrates how to trigger a custom print action for a PDF document using the `@vue-pdf-viewer/viewer` component. It includes functionality to track print progress, handle completion, and report errors, allowing for a more controlled printing experience. The `printControl` object from the viewer's ref is used to manage these events and initiate the print job.

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

const pdfViewerRef = ref();
const printProgress = ref(0);
const isPrinting = ref(false);

const customPrint = () => {
  const printCtrl = pdfViewerRef.value.printControl;
  
  if (!printCtrl) return;
  
  isPrinting.value = true;
  printProgress.value = 0;
  
  printCtrl.onProgress = (progress) => {
    printProgress.value = progress;
  };
  
  printCtrl.onComplete = () => {
    isPrinting.value = false;
    printProgress.value = 100;
    console.log('Print job completed');
  };
  
  printCtrl.onError = (error) => {
    isPrinting.value = false;
    console.error('Print error:', error);
  };
  
  printCtrl.print({ visibleDefaultProgress: false });
};
</script>

<template>
  <div class="pdf-with-print">
    <div class="print-controls">
      <button @click="customPrint" :disabled="isPrinting">
        {{ isPrinting ? 'Printing...' : 'Print PDF' }}
      </button>
      
      <div v-if="isPrinting" class="print-progress">
        <div class="progress-bar">
          <div 
            class="progress-fill"
            :style="{ width: `${printProgress}%` }"
          ></div>
        </div>
        <span>{{ printProgress }}%</span>
      </div>
    </div>
    
    <VPdfViewer 
      ref="pdfViewerRef"
      :src="pdfSource"
      :toolbar-options="{ printable: false }"
    />
  </div>
</template>
```

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

### Quasar Framework Webpack Alias

Source: https://context7_llms

Configures the Quasar build process to set up a webpack alias for the '@vue-pdf-viewer/viewer' package, ensuring correct module resolution.

```javascript
// quasar.config.js
const path = require('path');

module.exports = {
  build: {
    transpile: false,
    publicPath: '/',
    vueLoaderOptions: {},
    chainWebpack (chain) {
      chain.resolve.alias.set('@vue-pdf-viewer/viewer', path.resolve('./node_modules/@vue-pdf-viewer/viewer'))
    }
  }
}
```

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

### Vue PDF Viewer Custom Search Implementation

Source: https://context7_llms

Shows how to implement custom search functionality for the VPdfViewer component, allowing users to search within the PDF content and navigate through results.

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

const pdfViewerRef = ref();
const searchTerm = ref('');
const searchResults = ref([]);
const currentMatch = ref(0);

const performSearch = () => {
  if (!searchTerm.value.trim()) return;
  
  pdfViewerRef.value.searchControl?.search(searchTerm.value);
};

const nextMatch = () => {
  pdfViewerRef.value.searchControl?.nextSearchMatch();
  currentMatch.value++;
};

const prevMatch = () => {
  pdfViewerRef.value.searchControl?.prevSearchMatch();
  currentMatch.value--;
};
</script>

<template>
  <div class="pdf-with-search">
    <div class="search-controls">
      <input 
        v-model="searchTerm" 
        @keyup.enter="performSearch"
        placeholder="Search in PDF..."
      />
      <button @click="performSearch">Search</button>
      <button @click="prevMatch">Previous</button>
      <button @click="nextMatch">Next</button>
    </div>
    
    <VPdfViewer 
      ref="pdfViewerRef"
      :src="pdfSource"
      :toolbar-options="{ searchable: false }"
    />
  </div>
</template>
```

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

### Vue ClientOnly Wrapper for PDF Viewer

Source: https://context7_llms

Demonstrates using the `<ClientOnly>` component to ensure the VPdfViewer is rendered only on the client side, preventing SSR issues.

```vue
<template>
  <ClientOnly>
    <VPdfViewer :src="pdfSource" />
    <template #fallback>
      <div>Loading PDF viewer...</div>
    </template>
  </ClientOnly>
</template>
```

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

### Highlight Controller Actions

Source: https://context7_llms

Add visual highlights to specific keywords or text within the PDF. Supports custom highlight colors, styling options like case sensitivity and whole word matching, and clearing all highlights.

```javascript
const highlightCtrl = pdfViewerRef.value.highlightControl;

// Add highlights
highlightCtrl?.highlight([
  {
    keyword: "important text",
    highlightColor: "rgba(255,255,0,0.5)",
    options: { 
      matchCase: true, 
      wholeWords: true 
    }
  },
  {
    keyword: "another term",
    highlightColor: "rgba(255,0,0,0.3)"
  }
]);

// Clear all highlights
highlightCtrl?.clear();
```

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

### Nuxt.js Configuration for PDF Viewer

Source: https://context7_llms

Shows how to configure Nuxt.js to disable Server-Side Rendering (SSR) or enable WASM support, which might be relevant for certain client-side heavy components like PDF viewers.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  ssr: false, // Disable SSR entirely
  // or
  nitro: {
    experimental: {
      wasm: true
    }
  }
})
```

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

### CharacterMap Interface

Source: https://context7_llms

Specifies the configuration for character map data, including its URL and whether it is packed.

```typescript
interface CharacterMap {
  url: string;
  packed: boolean;
}
```

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

### Search Controller Actions

Source: https://context7_llms

Enable text searching within the PDF document. Allows searching for specific terms and navigating between found matches using next, previous, or direct match navigation.

```javascript
const searchCtrl = pdfViewerRef.value.searchControl;

// Search for text
searchCtrl?.search("searchTerm");

// Navigation between matches
searchCtrl?.nextSearchMatch();
searchCtrl?.prevSearchMatch();
searchCtrl?.goToMatch(2); // Go to 3rd match (0-indexed)
```

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

### ViewportDimensions Interface

Source: https://context7_llms

Represents the dimensions and scale of the viewer's viewport, including width, height, current zoom scale, and rotation angle.

```typescript
interface ViewportDimensions {
  width: number;
  height: number;
  scale: number;
  rotation: number;
}
```

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

### ViewMode Enum

Source: https://context7_llms

Specifies the document viewing modes, allowing users to display pages either as a single page or in dual-page spreads.

```typescript
enum ViewMode {
  SinglePage = 'single-page',
  DualPage = 'dual-page'
}
```

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

### VitePress Integration for SSR

Source: https://context7_llms

Configures VitePress to disable Server-Side Rendering for Vue templates, ensuring client-side components render correctly.

```javascript
// .vitepress/config.js
export default {
  vue: {
    template: {
      ssr: false
    }
  }
}
```

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

### Zoom Controller Actions

Source: https://context7_llms

Control the zoom level of the PDF viewer. Supports setting specific zoom factors, fitting to page, or fitting to width. Also allows retrieving the current zoom scale.

```javascript
const zoomCtrl = pdfViewerRef.value.zoomControl;

// Set zoom level
zoomCtrl?.zoom(1.5); // 150%
zoomCtrl?.zoom(ZoomLevel.PageFit); // Fit to page
zoomCtrl?.zoom(ZoomLevel.PageWidth); // Fit to width

// Get current zoom
const currentScale = zoomCtrl?.scale;
```

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

### ZoomLevel Enum

Source: https://context7_llms

Defines predefined zoom levels for fitting the document content to the viewer, such as actual size, page fit, or page width.

```typescript
enum ZoomLevel {
  ActualSize = 'actual-size',
  PageFit = 'page-fit',
  PageWidth = 'page-width'
}
```

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

### ScrollMode Enum

Source: https://context7_llms

Enumerates the different scrolling modes available for viewing PDF documents, including horizontal, vertical, page-based, and wrapped layouts.

```typescript
enum ScrollMode {
  Horizontal = 'horizontal',
  Page = 'page',
  Vertical = 'vertical',
  Wrapped = 'wrapped'
}
```

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