Understanding Plugins

Plugins are the heart of EmbedPDF’s headless architecture. They are modular packages that add specific features and capabilities to your core viewer. This à la carte approach ensures your application remains lean, loading only the functionality you actually need.

Think of the <EmbedPDF> component as a smartphone: it’s powerful on its own, but it’s the apps (plugins) you install that give it new features like navigation, social media, or games.

Example: Adding a Zoom Feature

Let’s walk through a complete example of adding a zoom feature to a basic viewer.

1. Install the Plugin Package

First, install the zoom plugin package:


npm install @embedpdf/plugin-zoom


pnpm add @embedpdf/plugin-zoom


yarn add @embedpdf/plugin-zoom


bun add @embedpdf/plugin-zoom

2. Register the Plugin

Next, import ZoomPluginPackage and add it to the plugins array that you pass to the <EmbedPDF> component. This activates the zoom functionality.


<script setup lang="ts">
// ... other imports
import { createPluginRegistration } from '@embedpdf/core';
import { ZoomPluginPackage } from '@embedpdf/plugin-zoom';
 
const plugins = [
  // ... other essential plugins
  createPluginRegistration(LoaderPluginPackage, { /* ... */ }),
  createPluginRegistration(ViewportPluginPackage),
  createPluginRegistration(ScrollPluginPackage),
  createPluginRegistration(RenderPluginPackage),
 
  // Add the zoom plugin to the array
  createPluginRegistration(ZoomPluginPackage),
];
</script>

3. Create a UI Component with the Plugin’s Composable

With the plugin registered, you can create a new component that uses the useZoom composable to access reactive state and functions.

ZoomToolbar.vue


<script setup lang="ts">
import { useZoom } from '@embedpdf/plugin-zoom/vue';
 
// The composable provides reactive state and methods
const { provides, state } = useZoom();
</script>
 
<template>
  <div v-if="provides" style="padding: 8px; background: #eee; display: flex; gap: 8px; align-items: center;">
    <span>Zoom: {{ Math.round(state.currentZoomLevel * 100) }}%</span>
    <button @click="provides.zoomOut()">-</button>
    <button @click="provides.zoomIn()">+</button>
    <button @click="() => provides.requestZoom(1.0)">Reset</button>
  </div>
</template>

4. Add the Component to Your Viewer

Finally, import and place your new <ZoomToolbar /> component inside the <EmbedPDF> provider. This is essential, as it allows the useZoom composable to access the context provided by the ZoomPluginPackage.

PDFViewer.vue


<script setup lang="ts">
import { EmbedPDF } from '@embedpdf/core/vue';
import ZoomToolbar from './ZoomToolbar.vue'; // 1. Import the toolbar
// ... other setup
</script>
 
<template>
  <div style="height: 500px; border: 1px solid black; display: flex; flexDirection: 'column'">
    <EmbedPDF :engine="engine" :plugins="plugins">
      <ZoomToolbar /> {/* 2. Add the component here */}
      <div style="flex: 1; overflow: 'hidden'">
        <Viewport>
          </Viewport>
      </div>
    </EmbedPDF>
  </div>
</template>