Vue Office Document Viewer

Open DOCX, XLSX, PPTX, PDF, and other supported documents in Vue 3 with one browser-local Web Component and no document-conversion backend.

Use the native custom element in Vue

Vue 3 can consume the docviewkit-viewer custom element directly. Configure the template compiler to treat the tag as a custom element, keep a template ref to the DOM element, and call open() when the host file changes.

The same Viewer package, document model, diagnostics, and browser-local processing path are used in Vue, React, Angular, and vanilla JavaScript.

Configure Vue and Vite

sh
npm install @docviewkit/viewer
js
// vite.config.js
import vue from '@vitejs/plugin-vue';

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === 'docviewkit-viewer'
        }
      }
    })
  ]
};

Vue single-file component

vue
<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import '@docviewkit/viewer';

type ViewerElement = HTMLElement & {
  open(file: File): Promise<unknown>;
};

const props = defineProps<{ file?: File }>();
const viewer = ref<ViewerElement>();

watchEffect(() => {
  if (props.file && viewer.value) {
    void viewer.value.open(props.file);
  }
});
</script>

<template>
  <docviewkit-viewer ref="viewer" />
</template>
SSR boundary

For Nuxt or another server-rendered Vue host, import and register the Viewer only in client code because custom elements, Workers, and Canvas are browser APIs.

Verify the complete integration