Props

<DocxEditor> supplies the packaged host. This page groups its public props by use. See the Vue API reference for generated signatures.

Document and mount state

Use document for the document source.

DocumentSource accepts Uint8Array, ArrayBuffer, 'blank', or an existing DocumentHandle. Resolve URLs and paths with useDocxSource().

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

<template>
  <DocxEditor document="blank" mode="edit" zoom-mode="auto" />
</template>

<DocxEditor> rebuilds when the document identity changes. It applies later author, locale, mode, translate, zoom, zoomMode, and catalog changes without a rebuild. Existing revisions keep their authors.

For regional date input, pass locale="en-GB" for day/month input or locale="pl-PL" for Polish dates such as 01.02.2030. The same prop works on DocxEditor.Root. It preserves dates already in the document. Use i18n separately to customize UI strings; see date input behavior for details.

Viewing mode

Set mode="view" to display the document without content edits. Clicks, drags, repeated clicks, and caret keys preserve the selection. The editor hides the caret and uses the arrow pointer over text. Toolbar values remain tied to the preserved selection.

Links, equation previews, and Show/Hide remain available. Search and programmatic selection can still move the selection. Search highlights remain visible without a caret.

Modules

modules registers capability modules when the editor is created.

The editor ignores later modules array changes. Change the Vue :key to remount the editor with another module set.

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

const modules = [reviewModule()];
</script>

<template>
  <DocxEditor :key="moduleSet" :document="bytes" :modules="modules" author="Jess Lin" />
</template>

The review module lets you show and manage tracked changes and comments. The Vue Pro entry also exports custom-node chip and context-menu chrome.

Chrome and layout

These props control the packaged frame:

Set chrome to false for the document surface without packaged chrome. You can then build the frame from the composition primitives.

Appearance

The appearance prop name is colorMode.

colorMode applies a display transform to the document canvas. The setting does not change authored document colors or saved output. Printing ignores colorMode and preserves authored document colors.

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

const colorMode = ref<'light' | 'dark'>('light');
</script>

<template>
  <button type="button" @click="colorMode = colorMode === 'dark' ? 'light' : 'dark'">
    Toggle theme
  </button>
  <DocxEditor :document="bytes" :color-mode="colorMode" />
</template>

See Dark mode for canvas behavior.

Fonts

fonts supplies bytes for text shaping, line wrapping, and pagination.

Embedded fonts load from the document. Configured fonts extend that set.

Use packagedFonts() for the Word default substitutes. It resolves per document, loading a family when that document names it, or when that family is the document's default face. It loads only requested families and the default font. It makes no third-party requests.

The resolver also requests the configured default font. With the default Calibri configuration, it loads Carlito for text without an explicit font.

useFonts() keeps one resolver identity, which the fonts prop needs.

<script setup lang="ts">
import { DocxEditor, useFonts } from '@docx-editor.dev/vue';
import { packagedFonts } from '@docx-editor.dev/fonts';

const fonts = useFonts(packagedFonts());

function reportFontError(error: { code: string }) {
  report(error.code);
}
</script>

<template>
  <DocxEditor :document="bytes" :fonts="fonts" @font-error="reportFontError" />
</template>

Add an origin by adding an argument. Arguments compose first-wins:

import { googleFonts } from '@docx-editor.dev/fonts/google';

const fonts = useFonts(packagedFonts(), googleFonts());

packagedFonts() resolves after the document is parsed, so the first layout can use fallback measurement. The editor updates pagination when the fonts arrive. Font arrivals preserve edits, selection, and undo history. For a document that must paginate correctly on the first pass, use defaultFonts() instead. For more information, see Fonts and measurement.

See Fonts and measurement for font sources and on-demand loading.

Title bar customization

Use title and the two named slots to customize the title bar.

<DocxEditor :document="bytes" :title="title" @title-change="title = $event">
  <template #titleBarLeft>
    <MyLogo />
  </template>
  <template #titleBarRight>
    <SaveIndicator :dirty="dirty" />
  </template>
</DocxEditor>

The title becomes editable when you listen for @title-change.

Emits

<DocxEditor> emits these six events:

DocumentChange contains revision and identity changes. It does not contain saved bytes.

<DocxEditor
  :document="bytes"
  title="Proposal.docx"
  @ready="onReady"
  @change="reportChange"
  @save="save"
  @open="open"
  @title-change="title = $event"
  @font-error="reportFontError"
/>

DocxEditorRoot emits ready, change, and font-error. File and title events belong to <DocxEditor>.

Ref methods

Capture a DocxEditorRef for imperative document operations.

<script setup lang="ts">
import { ref } from 'vue';
import { DocxEditor, type DocxEditorRef } from '@docx-editor.dev/vue';

const editorRef = ref<DocxEditorRef | null>(null);

async function save() {
  const buffer = await editorRef.value?.save();
  if (buffer) await upload(buffer);
}
</script>

<template>
  <DocxEditor ref="editorRef" :document="bytes" />
</template>

The ref exposes seven methods:

Use exec() for commands that must use the same validation as packaged chrome. Use snapshot() for a synchronous state read.

popups

Use definePopup(MyPopup) to customize an automatic popup with your component. Forward its typed props to the default component to retain editor behavior. Render callbacks also work. Set an entry to false to manage its trigger and visibility yourself. For supported popups and defaults, see Customize popups.

Next steps

• Vue quickstart
• Vue examples
• Vue composition
• Vue API reference