@eigenpal/docx-editor-vue
The Vue 3 adapter for docx-editor. It exposes DocxEditor, Vue composables, and UI components under /ui.
Status
@eigenpal/docx-editor-vue targets Vue 3 and is released in the same fixed version group as the React package. It keeps the same component name, subpath layout, and plugin contract where Vue supports the same surface. Remaining gaps are tracked in the parity contract below.
Install
npm install @eigenpal/docx-editor-vuePulls in @eigenpal/docx-editor-core and @eigenpal/docx-editor-i18n.
Quickstart
<script setup lang="ts">
import { ref } from 'vue';
import { DocxEditor } from '@eigenpal/docx-editor-vue';
import '@eigenpal/docx-editor-vue/styles.css';
const buf = ref<ArrayBuffer | null>(null);
</script>
<template>
<DocxEditor :document-buffer="buf" />
</template>Using with Nuxt
For Nuxt 3 and 4, install @eigenpal/nuxt-docx-editor, the official Nuxt module. It wraps this adapter and auto-imports an SSR-safe <DocxEditor>, so there's no <ClientOnly> wrapper to write:
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@eigenpal/nuxt-docx-editor'],
});See Nuxt for the module options and what to import from the adapter directly.
Subpaths
@eigenpal/docx-editor-vue:<DocxEditor>,DocxEditorProps,DocxEditorRef,EditorMode,renderAsync,i18nPlugin,provideLocale@eigenpal/docx-editor-vue/ui:Toolbar,EditorToolbar,ResponsiveToolbar,TableToolbar,MenuBar,TitleBar,ColorPicker,FontPicker,StylePicker, and the dialog components (find/replace, hyperlink, page setup, table properties, and more)@eigenpal/docx-editor-vue/composables: Vue equivalents of the React hooks (useDocxEditor,useHistory,useAutoSave,useTrackedChanges,useFindReplace, etc.)@eigenpal/docx-editor-vue/dialogs: hyperlink, find/replace, paste special, page setup@eigenpal/docx-editor-vue/plugin-api: plugin host@eigenpal/docx-editor-vue/styles: CSS
Every export is in the Vue API reference.
Parity with React
scripts/parity/parity.contract.json lists every public prop and ref member shipped under either adapter, grouped as paired, deferred-in-Vue, or adapter-specific. CI parses both packages' API snapshots and fails when the contract changes without an update. Deferred-in-Vue items today include the agentPanel prop, the controlled comments prop, onSave/onFontsLoaded/clipboard callbacks, and the plugin overlay surface. Items in the paired bucket are expected to behave the same in both adapters.
Agent integration
Same toolkit, Vue subpath:
import { useAgentBridge } from '@eigenpal/docx-editor-agents/vue';
const { executeToolCall, toolSchemas } = useAgentBridge({
editorRef,
author: 'Assistant',
});Use the composable instead of the React hook. The server route can still use @eigenpal/docx-editor-agents/ai-sdk/server. The React-only agentPanel prop has no Vue equivalent yet; render the chat UI components next to the editor (see Vue examples).
Next steps
- Vue API reference
- Migration: 0.x → 1.x if you ran the React adapter inside a Vue wrapper before
- Plugins
React examples
Concrete patterns for embedding <DocxEditor> in React: load from URL, controlled comments, autosave, custom toolbar, custom fonts, Yjs collaboration, agent panel.
@eigenpal/nuxt-docx-editor
Official Nuxt 3 and 4 module. Auto-imports an SSR-safe <DocxEditor>, injects the stylesheet, no <ClientOnly> boilerplate.