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@next @cloudpdf/engine@next

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

Your first viewer#

cloudEngine({ baseUrl }) creates the engine — synchronously and cheaply: it holds an HTTP client and nothing else, so a module-scope const engine = cloudEngine({ baseUrl }) is safe (even under SSR). Hand it to <Viewer>; every open, render, and text call rides HTTPS to your CloudPDF deployment. This is the whole app:

Loading live preview…

<script setup lang="ts">
import { onMounted, shallowRef } from 'vue';
import { cloudEngine } from '@cloudpdf/engine';
import type { DocumentHandle, OpenInput } from '@cloudpdf/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.
const doc = shallowRef<DocumentHandle>();

// The engine is created synchronously and costs nothing until first use —
// only opening a document does real work.
const engine = cloudEngine({ baseUrl: 'https://engine.cloudpdf.com' });

onMounted(async () => {
  const ebook: OpenInput = { kind: 'share', shareToken: 'shr_WGj1goAtlNN_fQ5OswPrbJQM' };
  doc.value = await engine.open(ebook);
});
</script>

<template>
  <PdfPage v-if="doc" :doc="doc" :page-number="1" />
  <p v-else>Opening document…</p>
</template>

Prefer the viewer to own the engine’s lifetime — created on mount, destroyed on unmount? Pass a thunk instead: engine={() => cloudEngine({ baseUrl })}. See the Engine getting started for tokens, public shares, and the ownership model.