@eigenpal/docx-editor-vue

Vue 3 adapter for the docx-editor. WYSIWYG .docx editing with canonical OOXML, tracked changes, comments, and an AI agent bridge.

Quick Start

npm install @eigenpal/docx-editor-vue

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

const buffer = ref<ArrayBuffer | null>(null);

async function loadFile(e: Event) {
  const file = (e.target as HTMLInputElement).files?.[0];
  buffer.value = file ? await file.arrayBuffer() : null;
}
</script>

<template>
  <input type="file" accept=".docx" @change="loadFile" />
  <DocxEditor v-if="buffer" :document-buffer="buffer" mode="editing" />
</template>

Import the stylesheet once at your app entry. Vite's library mode doesn't auto-inject CSS imports, so the toolbar will render unstyled without it.

Using Nuxt? @eigenpal/nuxt-docx-editor wraps this adapter as a Nuxt 3 & 4 module — SSR-safe component registration and the stylesheet are wired automatically.

Start with a blank document

Skip the file picker for new documents. createEmptyDocument returns a fresh Document model you can pass straight to the editor:

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

const doc = ref(createEmptyDocument());
// Or with options:
// createEmptyDocument({ initialText: 'Untitled', pageWidth: 12240 })
</script>

<template>
  <DocxEditor :document="doc" mode="editing" />
</template>

createDocumentWithText(text, options?) is the same idea with a starting paragraph already typed. Both helpers are re-exported from @eigenpal/docx-editor-core so you don't need a separate dependency.

Packages

| Package | Description | | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | @eigenpal/docx-editor-react |   React adapter. Toolbar, paged editor, plugins. | | @eigenpal/docx-editor-vue |   Vue 3 adapter. Toolbar, paged editor, plugins. | | @eigenpal/nuxt-docx-editor |   Nuxt 3 & 4 module wrapping this adapter. | | @eigenpal/docx-editor-core | Framework-agnostic core: OOXML parser, serializer, layout engine, ProseMirror schema. Depend on this if you fork the React or Vue adapter. | | @eigenpal/docx-editor-i18n | Shared locale strings and types consumed by both adapters. | | @eigenpal/docx-editor-agents | Agent SDK and chat UI: framework-agnostic bridge, MCP server, AI SDK adapters, plus React UI. |

Forking the adapter? Keep your fork thin. Depend on @eigenpal/docx-editor-core directly so parser, serializer, and rendering fixes land in your build automatically, without backporting each upstream change by hand.

Imperative mounting

import { renderAsync } from '@eigenpal/docx-editor-vue';

const editor = await renderAsync(file, document.getElementById('editor')!, { mode: 'editing' });
await editor.save();
editor.destroy();

Subpaths

• @eigenpal/docx-editor-vue — DocxEditor, renderAsync, public types
• @eigenpal/docx-editor-vue/ui — toolbar primitives, pickers, sidebars, dialogs
• @eigenpal/docx-editor-vue/composables — useDocxEditor, useZoom, useTableSelection, ...
• @eigenpal/docx-editor-vue/dialogs — dialog SFCs barrel
• @eigenpal/docx-editor-vue/plugin-api — plugin host and plugin-facing types
• @eigenpal/docx-editor-vue/styles — style constants (EDITOR_CSS_PATH, z-index)

Component API

DocxEditor and DocxEditorRef mirror the React adapter — the same props, emits, and ref methods, with the import path swapped. Full reference: docx-editor.dev/docs/props.

For lower-level mounting on your own DOM, use the useDocxEditor composable.

Contributing

Contributions welcome. See CONTRIBUTING.md for setup, tests, and the one-time CLA signature.

Commercial Support

[!TIP] Questions or custom features? Email [email protected].