Integrations

Vue integration

Install one package, import it, and mount the viewer. The render engine, its worker, and (for the framework wrappers) React all come bundled — nothing else to configure.

01 / Live preview

Open the full interactive demo →

This is the actual Vue app built from the code below, running live in an iframe.

02 / Install

npm install @trupdf/vue vue

03 / Example

<script setup lang="ts">
// The viewer chrome is React under the hood; mountTruPDF renders it into
// a plain <div>. This component wraps that lifecycle the Vue way.
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
// One import, one package. mountTruPDF mounts the viewer into any <div>;
// react / react-dom / the render engine / its worker all come bundled with @trupdf/vue.
import { mountTruPDF, type MountHandle } from '@trupdf/vue';
import '@trupdf/viewer/styles.css';

const props = defineProps<{
  source: string | ArrayBuffer;
  secureMode?: boolean;
}>();

const host = ref<HTMLDivElement | null>(null);
let handle: MountHandle | undefined;

onMounted(() => {
  if (!host.value) return;
  handle = mountTruPDF(host.value, {
    source: props.source,
    secureMode: props.secureMode ?? false,
    theme: 'system',
  });
});

// Re-render (without tearing down the React root) when props change.
watch(
  () => [props.source, props.secureMode],
  () => handle?.update({ source: props.source, secureMode: props.secureMode ?? false }),
);

onBeforeUnmount(() => handle?.unmount());
</script>

<template>
  <div ref="host" style="width: 100%; height: 100%" />
</template>