Vue

@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-vue

Pulls 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

On this page