@docx-editor.dev/vue

Use Vue 3 components and composables to open, edit, and save DOCX files.

The shared engine handles document state, editing, layout, and rendering.

Features

• Open, edit, and save documents.
• Compose your editor interface.
• Connect controls through composables.
• Translate editor controls.

Install

Install the adapter and its required engine peer:

npm install @docx-editor.dev/vue @docx-editor.dev/core

Quick start

Import the stylesheet once and give the editor a container with a defined height:

<script setup lang="ts">
import { DocxEditor } from '@docx-editor.dev/vue';
import '@docx-editor.dev/vue/styles.css';
</script>

<template>
  <div style="height: 100vh">
    <DocxEditor document="blank" />
  </div>
</template>

To open a file, pass its ArrayBuffer or Uint8Array as :document.

Composition API

Compose the editor root, viewport, and content when you need your own interface. Put custom controls inside the root:

<script setup lang="ts">
import { DocxEditorRoot, DocxEditorViewport, DocxEditorContent } from '@docx-editor.dev/vue';
import '@docx-editor.dev/vue/styles.css';
import BoldButton from './BoldButton.vue';
</script>

<template>
  <DocxEditorRoot document="blank">
    <BoldButton />
    <DocxEditorViewport style="height: 80vh">
      <DocxEditorContent />
    </DocxEditorViewport>
  </DocxEditorRoot>
</template>

Define the button in BoldButton.vue. Composables must run in a descendant of DocxEditorRoot to access its editor. Destructure computed refs so Vue unwraps them in the template:

<script setup lang="ts">
import { useEditorCommand } from '@docx-editor.dev/vue';

const { execute, isEnabled, isActive } = useEditorCommand('text.bold');
</script>

<template>
  <button @mousedown.prevent :disabled="!isEnabled" :aria-pressed="isActive" @click="execute()">
    Bold
  </button>
</template>

The package also exports useDocxEditor, useEditorState, useEditorEvent, and useFontFamily.

SSR and Nuxt

The editor requires browser APIs. For Nuxt, mount it inside <ClientOnly> and use a .client.vue component for its imports. For other server-rendered applications, import and mount the editor in the browser.

The Nuxt module remains a private workspace package. External applications should follow the Nuxt guide.

Docs and demo

• Vue adapter docs
• Composition guide
• Composables reference
• Export Markdown and PDF
• Print documents
• Live demo: bun run dev:vue in the monorepo (examples/vue)

License

Apache-2.0