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/enginesThe usePdfiumEngine Composable
This function handles the creation of the WebWorkerEngine, manages its loading and error states as reactive refs, and automatically cleans up the engine when the component is unmounted.
Here’s a basic example using the Composition API with <script setup>:
PDFProcessor.vue
<script setup>
import { ref, watchEffect } from 'vue';
import { usePdfiumEngine } from '@embedpdf/engines/vue';
// The composable returns reactive refs
const { engine, isLoading, error } = usePdfiumEngine();
const isReady = ref(false);
watchEffect(() => {
// The engine ref needs to be initialized once it's available.
if (engine.value && !isReady.value) {
engine.value.initialize().toPromise().then(() => {
isReady.value = true;
});
}
});
</script>
<template>
<div v-if="error">
Error: {{ error.message }}
</div>
<div v-else-if="isLoading || !isReady">
Initializing 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>Last updated on August 14, 2025
Need Help?
Join our community for support, discussions, and to contribute to EmbedPDF's development.