Using with Vue

While @embedpdf/engines is a framework-agnostic library, it includes a dedicated Vue Composable, usePdfiumEngine, to simplify integration and manage the engine’s lifecycle within your components.

This is the recommended way to get started with EmbedPDF in a Vue 3 application.

Installation

The usePdfiumEngine composable is included directly within the main package.

npm install @embedpdf/engines

pnpm add @embedpdf/engines

yarn add @embedpdf/engines

bun add @embedpdf/engines

The usePdfiumEngine Composable

This function handles the creation of the PDF engine, manages its loading and error states as reactive refs, and automatically cleans up the engine when the component is unmounted. The engine is fully initialized when returned—no additional setup required.

Here’s a basic example using the Composition API with <script setup>:

<script setup>
import { usePdfiumEngine } from '@embedpdf/engines/vue';
 
// The composable returns reactive refs
const { engine, isLoading, error } = usePdfiumEngine();
</script>
 
<template>
  <div v-if="error">
    Error: {{ error.message }}
  </div>
  <div v-else-if="isLoading || !engine">
    Loading PDF Engine...
  </div>
  <div v-else>
    <p>PDF Engine is ready to use!</p>
    <!-- You can now pass the engine ref to other components -->
  </div>
</template>