@s8fy/pptx-viewer-vue

High-fidelity PowerPoint viewing in Vue 3, powered by the shared PPTX viewer engine.

Vue 3 adapter for @s8fy/pptx-viewer, with font-driven text layout, vector graphics, charts, and supported DrawingML effects. The adapter connects Vue lifecycle, props, and events to the shared viewer controller.

Install

pnpm add @s8fy/pptx-viewer @s8fy/pptx-viewer-vue vue

@s8fy/pptx-viewer is a direct installation because the application imports its stylesheet.

Peer dependency: Vue ^3.5.42. The package declares Node.js 22.12+ and includes ESM/CJS entrypoints with TypeScript declarations.

Usage

<script setup lang="ts">
import { computed, shallowRef } from 'vue'
import { PptxViewer } from '@s8fy/pptx-viewer-vue'
import type { Viewer, ViewerSource } from '@s8fy/pptx-viewer'
import '@s8fy/pptx-viewer/style.css'

const props = defineProps<{ file: ArrayBuffer }>()
const source = computed<ViewerSource>(() => ({ kind: 'file', file: props.file }))
const viewer = shallowRef<Viewer | null>(null)
function onReady(value: Viewer) {
  viewer.value = value
}
function onSlideChange(index: number) {
  console.log(`Slide ${index + 1}`)
}
function onError(error: Error) {
  console.error(error)
}
</script>

<template>
  <PptxViewer :source="source" @ready="onReady" @slide-change="onSlideChange" @error="onError" />
</template>

PptxViewer accepts the facade's ViewerOptions either as direct props or through options. It emits ready, load, slide-change, license-state-change, and error. The adapter only handles Vue lifecycle, props, and emits; rendering is delegated to the universal viewer controller. Module import is SSR-safe, while mounting requires a browser DOM.

Events and option precedence

| Event | Payload | | ---------------------- | ------------------------------------------------------------------- | | ready | Viewer controller, on creation/recreation; not document readiness | | load | { total: number } after the document is ready | | slide-change | Zero-based slide index | | license-state-change | ViewerLicenseState | | error | Error |

Defined direct props override matching fields in options. For these four controller notifications (load, slide-change, license-state-change, error), callbacks supplied inside options are called in addition to Vue listeners. Animation callbacks can be supplied as direct onAnimationStart / onAnimationEnd props or inside options; defined direct props take precedence. The component does not emit separate animation-start / animation-end Vue events.

Sources and lifecycle

Pass PPTX bytes obtained with await file.arrayBuffer(); do not pass a File or URL directly. For model data, use { kind: 'presentation', presentation }; omit source for an empty viewer. The old top-level file, fileName, and presentation props are rejected.

Use a computed/stable source object. Source changes reuse the controller; configuration changes or source removal recreate it. Replace model/source references to apply changes rather than relying on in-place model mutation. Unmount destroys the controller automatically. A controller retained from ready becomes stale on replacement/unmount; use the latest event value only while mounted.

Use load for initial readiness. If controlling loading imperatively, omit the source prop and await viewer.value.load(buffer) after ready. Catch all promise rejections from controller methods. PDF/PPTX export requires an original file source, not a model-only source.

For SSR/Nuxt, provide file data and browser operations on the client. Viewer parsing defaults to WASM. See the viewer README for rendering capabilities, fonts, assets, authorization, and export options.

Upgrading to 3.0

The controller received through ready no longer has fullscreen(). Use await viewer.enterFullscreen() in a user interaction handler and handle its Promise<void> rejection; the error event/onError callback only notifies and does not consume the rejection. Vue component props and events are unchanged. Rendering, parsing, PDF export, and lifecycle behavior follow the shared Viewer 3.0.0 contract.

License

The default license is the PolyForm Noncommercial License. Commercial use requires a separate commercial license.