Getting Started
Let’s build a basic, scrollable PDF viewer in Vue. This guide will walk you through the essential setup.
1. Installation
You’ll need a few packages to create a minimal viewer: the core library, the engine, and a few essential plugins.
npm install @embedpdf/core @embedpdf/engines @embedpdf/plugin-loader @embedpdf/plugin-viewport @embedpdf/plugin-scroll @embedpdf/plugin-render2. Create Your Viewer Component
The core of your viewer will be the <EmbedPDF> component, which manages the engine and plugins. This example uses Vue 3’s <script setup> syntax.
PDFViewer.vue
<script setup lang="ts">
import { usePdfiumEngine } from '@embedpdf/engines/vue';
import { EmbedPDF } from '@embedpdf/core/vue';
import { createPluginRegistration } from '@embedpdf/core';
// Import the essential plugins and their components
import { ViewportPluginPackage, Viewport } from '@embedpdf/plugin-viewport/vue';
import { ScrollPluginPackage } from '@embedpdf/plugin-scroll';
import { Scroller } from '@embedpdf/plugin-scroll/vue';
import { LoaderPluginPackage } from '@embedpdf/plugin-loader';
import { RenderPluginPackage } from '@embedpdf/plugin-render';
import { RenderLayer } from '@embedpdf/plugin-render/vue';
// 1. Initialize the engine with the Vue composable
const { engine, isLoading } = usePdfiumEngine();
// 2. Register the plugins you need
const plugins = [
createPluginRegistration(LoaderPluginPackage, {
loadingOptions: {
type: 'url',
pdfFile: {
id: 'example-pdf',
url: 'https://snippet.embedpdf.com/ebook.pdf',
},
},
}),
createPluginRegistration(ViewportPluginPackage),
createPluginRegistration(ScrollPluginPackage),
createPluginRegistration(RenderPluginPackage),
];
</script>
<template>
<div style="height: 500px; border: 1px solid black;">
<div v-if="isLoading || !engine" class="loading-pane">
Loading PDF Engine...
</div>
<EmbedPDF v-else :engine="engine" :plugins="plugins">
<Viewport class="viewport-class">
<Scroller>
<template #default="{ page }">
<div
:style="{
width: `${page.width}px`,
height: `${page.height}px`,
}"
>
<RenderLayer :pageIndex="page.pageIndex" />
</div>
</template>
</Scroller>
</Viewport>
</EmbedPDF>
</div>
</template>
<style scoped>
.loading-pane {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.viewport-class {
background-color: #f1f3f5;
}
</style>3. Render Your Component
Finally, import and use your new <PDFViewer /> component in your main application file.
App.vue
<script setup lang="ts">
import PDFViewer from './PDFViewer.vue';
</script>
<template>
<PDFViewer />
</template>You now have a functional PDF viewer!
Next Steps
- Discover how to add more features by Understanding Plugins.
Last updated on August 14, 2025
Need Help?
Join our community for support, discussions, and to contribute to EmbedPDF's development.