Nuxt

The viewer and the editor run in the browser. In Nuxt, they go in a component that renders only there, while the server renders the page around it.

Install

Viewer

npm install @docmentis/udoc-viewer

Editor

npm install @docmentis/udoc-editor

The component

Name the component's file with .client.vue, so Nuxt renders it only in the browser:

Viewer

<script setup lang="ts">
import { nextTick, 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 () => {
    // Nuxt renders a `.client.vue` component's template once it has mounted.
    await nextTick();
    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 { nextTick, 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 () => {
    // Nuxt renders a `.client.vue` component's template once it has mounted.
    await nextTick();
    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, and onBeforeUnmount destroys it. Nuxt renders a client component's template only once it has mounted, so await nextTick() waits for the element to be there first.
• 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

Nuxt registers the component under its name, without the .client. 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

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

The example

examples/nuxt shows the viewer and the editor side by side in a Nuxt app, generated as a static site.