Platforms

Vue

The same viewer, as a Vue 3 component and a composable.

The wrapper depends on no format: formats is a prop, exactly as in React, and every renderer reports on one event bus, so the component has nothing format-specific in it.

Pane.vue

<script setup lang="ts">
import { GenomViewer } from '@genomdev/vue';
import { docx, pdf } from '@genomdev/genom/lazy';

const file = ref<File>();
</script>

<template>
  <GenomViewer
    :file="file"
    :formats="[docx, pdf]"
    :options="{ fit: 'width' }"
    @page-change="({ index, total }) => (page = index + 1)"
    @document-open="({ document }) => (title = document.metadata.title)"
    @viewer-error="({ error }) => console.error(error)"
  />
</template>

Events

Anything else a renderer emits — sheet:select, slide:change — is reached through the viewer instance, which the component exposes.

Event	Payload
`state-change`	`ViewerState` — status, progress, error, document
`page-change`	`{ index, total }`
`document-open`	`{ document, detection }`
`viewer-error`	`{ error }`

The composable

useGenom is the same binding without the component: it gives you the container ref, reactive state and the viewer.

useGenom

import { useGenom } from '@genomdev/vue';
import { all } from '@genomdev/genom/lazy';

const { containerRef, state, viewer, open, close } = useGenom({ formats: all });

watchEffect(() => {
  viewer.value?.on('sheet:select', ({ range }) => (selection.value = range));
});