@s8fy/pptx-viewer-vue

@s8fy/pptx-viewer-vue

Product · Framework guide · Viewer playground · Commercial licensing · Report an issue

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.

Key Features

• The shared viewer engine in Vue 3. Display native charts, SmartArt, styled tables, vector shapes, images, and supported Office equations with the same engine as the framework-neutral SDK.
• 3D and modern Office charts. Supported 3D column/bar, line, area, pie, and surface charts use projected geometry and selected scene settings, with approximate lighting. Waterfall, Funnel, Histogram, Treemap, Sunburst, and Box & Whisker have rendering paths, alongside classic chart families and selected 2D combinations. Formatting/layout coverage varies by family.
• Typography and DrawingML detail. Font-driven text layout, mixed styles, bullets, tabs, autofit, optional embedded fonts, glyph glow/reflections, shape inner shadows/reflections, and selected shape/text 3D profiles. SmartArt prefers cached drawings and supports selected uncached process/hierarchy layouts.
• Presentations that play. Supported object effects, selected slide transitions, Morph, click builds, fullscreen, presenter mode, and looping autoplay. Chart subtargets cover selected 2D column/bar series/categories/points and line/area series, excluding combination layers and charts with trendlines/error bars. Selected SmartArt nodes can animate independently. Playback defaults to fullscreen/presenter mode; enable inline animation explicitly when needed.
• Local viewing and PDF export. Supply PPTX bytes directly, self-host runtime/font assets, and disable remote fonts for offline deployments. PDF export runs locally from the original file and creates static pages.
• Vue props, events, and cleanup. Typed direct props or an options object, controller access through ready, load/slide/error notifications, controller reuse on source changes, and automatic destruction on unmount. Imports are SSR-safe; mounting needs a client-side DOM.

The adapter shares the Viewer's rendering engine and capability boundaries. Fonts, browser support, and the authored Office variant affect fidelity. Unsupported profiles use their applicable fallback; complete PowerPoint parity is not promised. Model-only sources cannot export the original file to PDF/PPTX, and commercial use requires a commercial license. See the shared capability details.

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, playback-change (playing boolean), 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

Defined direct props override matching fields in options. For these five controller notifications (load, slide-change, playback-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.