Vue

The viewer and the editor each fill an element you give them. In Vue, that's an element in your component's template, and the viewer is created in it once the component has mounted.

Install

Viewer

npm install @docmentis/udoc-viewer

Editor

npm install @docmentis/udoc-editor

The component

Viewer

<script setup lang="ts">
import { onBeforeUnmount, onMounted, useTemplateRef, watch } from "vue";
import { UDocViewer } from "@docmentis/udoc-viewer";

/** A viewer filling its element, opening `src`. */
const props = defineProps<{ src: string }>();
const container = useTemplateRef<HTMLDivElement>("container");
let viewer: UDocViewer | undefined;
// Unmounted before `create` resolves, the component destroys the viewer it made.
let gone = false;

onMounted(async () => {
    try {
        const created = await UDocViewer.create(container.value!);
        if (gone) return created.destroy();
        viewer = created;
        await viewer.open(props.src);
    } catch (error) {
        console.error("The viewer didn't open the document:", error);
    }
});

watch(
    () => props.src,
    (src) => viewer?.open(src),
);

onBeforeUnmount(() => {
    gone = true;
    viewer?.destroy();
});
</script>

<template>
    <div ref="container" class="pane"></div>
</template>

Editor

<script setup lang="ts">
import { onBeforeUnmount, onMounted, useTemplateRef, watch } from "vue";
import { UDocEditor } from "@docmentis/udoc-editor";

/** An editor filling its element, opening `src`. */
const props = defineProps<{ src: string }>();
const container = useTemplateRef<HTMLDivElement>("container");
let editor: UDocEditor | undefined;
// Unmounted before `create` resolves, the component destroys the editor it made.
let gone = false;

onMounted(async () => {
    try {
        const created = await UDocEditor.create(container.value!);
        if (gone) return created.destroy();
        editor = created;
        await editor.open(props.src);
    } catch (error) {
        console.error("The editor didn't open the document:", error);
    }
});

watch(
    () => props.src,
    (src) => editor?.open(src),
);

onBeforeUnmount(() => {
    gone = true;
    editor?.destroy();
});
</script>

<template>
    <div ref="container" class="pane"></div>
</template>

• onMounted creates the viewer once its element is on the page, and onBeforeUnmount destroys it.
• create is asynchronous, so the component can unmount before it resolves. gone records that, and the viewer created after it is destroyed at once.
• The watcher opens each new src in the same viewer.

Use it

The viewer fills its element, so give the element a height, here through its pane class:

<DocumentViewer src="/report.pdf" />

.pane {
    height: 100vh;
}

The engine's files

Vite puts the engine's binary and fonts beside your app as it builds it, so there's nothing to set up. Quick start says where else they can come from.

The example

examples/vue-vite shows the viewer and the editor side by side in a Vue app built with Vite.