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.

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 uses a light page regardless of this setting.

<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. So a document pays for what it declares instead of all 20 eager faces, and nothing is fetched from a third party.

The default face counts because a run that names no font still has to be measured in one. That face is Calibri, so Carlito loads for every document.

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 uses fixed measurement and the editor re-paginates when the faces arrive. Edits made in between survive that; the undo history behind them does not. 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.

Next steps

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