Getting Started

The headless libraries give you the engine and the plugin system — you own every pixel of the UI. An app depends on two packages: the adapter for your framework, and an engine.

Installation#

npm install @embedpdf/vue @embedpdf/engine

The Vue adapter mirrors the React surface subpath-for-subpath — the same verticals, exposed as components and composables.

Your first viewer#

localEngine() creates the engine — synchronously, allocating nothing until first use, so a module-scope const engine = localEngine() is safe (even under SSR). Hand it to <Viewer>: the viewer warms it up on mount and PDFium boots in a worker in the background, so the stage and render layer draw the pages the moment a document is ready — no worker wiring, no lifecycle to manage. This is the whole app:

Loading live preview…

<script setup lang="ts">
import { onMounted, ref, shallowRef } from 'vue';
import type { LocalEngine } from '@embedpdf/engine';
import PdfPage from './PdfPage.vue';

// The Vue adapter is in progress — this drives the framework-free engine
// directly: App owns the engine and the document, PdfPage renders one page.
type PdfDocument = Awaited<ReturnType<LocalEngine['open']>>;

const doc = shallowRef<PdfDocument>();
const status = ref('Booting engine…');

onMounted(async () => {
  // `localEngine()` IS the engine — no worker wiring needed; PDFium boots in
  // a worker on first use. The Vue adapter will own this for you.
  const { localEngine } = await import('@embedpdf/engine');
  const engine = localEngine();

  status.value = 'Opening document…';
  const response = await fetch('https://snippet.embedpdf.com/ebook.pdf');
  const bytes = new Uint8Array(await response.arrayBuffer());
  doc.value = await engine.open({ kind: 'bytes', id: 'ebook', bytes });
});
</script>

<template>
  <PdfPage v-if="doc" :doc="doc" :page-number="1" />
  <p v-else>{{ status }}</p>
</template>

Prefer the viewer to own the engine’s lifetime — created on mount, destroyed on unmount? Pass a thunk instead: engine={() => localEngine()}. See the Engine getting started for the ownership model, fallback fonts, cloud, and SSR.

Was this page helpful?

Your feedback goes directly to the documentation team.