Props — docx-editor Docs | DOCX Editor for React and Vue

The Vue adapter accepts the same props as React; the differences are Vue's kebab-case attribute binding and template refs in place of useRef. Anything documented under React props applies, this page focuses on the Vue-specific bits. Full generated reference: /docs/1.x/api/vue.

Binding props

Camel-case in TS, kebab-case in the template. Bind with : for non-string values:

<script setup lang="ts">
import { ref } from "vue";
import { DocxEditor, type EditorMode } from "@eigenpal/docx-editor-vue";
import "@eigenpal/docx-editor-vue/styles.css";
 
const buf = ref<ArrayBuffer | null>(null);
const mode = ref<EditorMode>("editing");
</script>
 
<template>
  <DocxEditor
    :document-buffer="buf"
    :mode="mode"
    author="Jess Lin"
    :show-zoom-control="true"
    @mode-change="(m) => (mode = m)"
  />
</template>

Props that are React callbacks become Vue events. So onModeChange in React is @mode-change in Vue. Same payload shape.

Template ref

Capture the editor ref with useTemplateRef (Vue 3.5+) or ref="..." + a ref():

<script setup lang="ts">
import { useTemplateRef } from "vue";
import { DocxEditor, type DocxEditorRef } from "@eigenpal/docx-editor-vue";
 
const editor = useTemplateRef<DocxEditorRef>("editor");
 
async function save() {
  const buf = await editor.value?.save();
  if (buf) await fetch("/api/documents/1", { method: "PUT", body: buf });
}
</script>
 
<template>
  <button @click="save">Save</button>
  <DocxEditor ref="editor" :document-buffer="null" />
</template>

Methods on DocxEditorRef match React one-to-one (save, addComment, proposeChange, findInDocument, scrollToParaId, scrollToPosition, getDocument). See React props for the table.

Props by group

The groupings under React props all apply identically. Quick map of the binding syntax for each group.

Document input

<DocxEditor :document-buffer="buf" />
<!-- or, pre-parsed -->
<DocxEditor :document="parsed" />

Mode and read-only

<DocxEditor :document-buffer="buf" :mode="mode" @mode-change="(m) => (mode = m)" />
<DocxEditor :document-buffer="buf" read-only />

Comments and collaboration

<DocxEditor
  :document-buffer="buf"
  author="Jess Lin"
  :comments="comments"
  @comments-change="(next) => (comments = next)"
/>

<DocxEditor
  :document-buffer="buf"
  :show-toolbar="false"
  :show-zoom-control="false"
  :initial-zoom="1.25"
/>

Title bar slots

Vue uses named slots in place of React's render-prop callbacks:

<DocxEditor :document-buffer="buf" document-name="Q3 Memo">
  <template #titleBarRight>
    <SaveIndicator :dirty="dirty" />
  </template>
</DocxEditor>

The slot names map directly to the React callback names: renderLogo → #logo, renderTitleBarRight → #titleBarRight.

Callbacks become events

React prop	Vue event
`onChange`	`@change`
`onSave`	`@save`
`onSelectionChange`	`@selection-change`
`onError`	`@error`
`onFontsLoaded`	`@fonts-loaded`
`onCommentAdd`	`@comment-add`
`onCommentResolve`	`@comment-resolve`
`onCommentDelete`	`@comment-delete`
`onCommentReply`	`@comment-reply`
`onPrint` / `onCopy` / `onCut` / `onPaste`	`@print` / `@copy` / `@cut` / `@paste`
`onModeChange`	`@mode-change`
`onDocumentNameChange`	`@document-name-change`

<DocxEditor
  :document-buffer="buf"
  @change="onChange"
  @save="onSave"
  @error="reportError"
/>

Styling

<DocxEditor
  :document-buffer="buf"
  class="rounded-lg shadow-md"
  :style="{ height: '80vh' }"
>
  <template #placeholder>
    <EmptyState />
  </template>
</DocxEditor>

i18n

<script setup>
import pl from "@eigenpal/docx-editor-i18n/pl";
import { DocxEditor } from "@eigenpal/docx-editor-vue";
</script>
 
<template>
  <DocxEditor :document-buffer="buf" :i18n="pl" />
</template>

Agents

<DocxEditor
  ref="editor"
  :document-buffer="buf"
  :agent-panel="{ render: () => h(AgentChatLog, { messages }) }"
/>

Or use the #agentPanel named slot if you prefer template syntax:

<DocxEditor :document-buffer="buf">
  <template #agentPanel>
    <AgentChatLog :messages="messages" />
  </template>
</DocxEditor>

Full agent wiring in Agents → Live editor.