@docx-editor.dev/vue

Install

npm install @docx-editor.dev/vue @docx-editor.dev/core vue

@docx-editor.dev/core and Vue 3 are peer dependencies. Install both beside the adapter. The adapter includes @docx-editor.dev/i18n.

Add @docx-editor.dev/pro for tracked changes and comments. Add @docx-editor.dev/editor-api to automate the open document.

Import the editor stylesheet once from your application entry:

import '@docx-editor.dev/vue/styles.css';

The stylesheet contains the editor chrome and layout classes. Your application must load it before you mount an editor.

Quickstart

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

<template>
  <DocxEditor :document="docxBytes" />
</template>

<DocxEditor> is the full packaged editor. It includes the title bar, menu, toolbar, navigation pane, hyperlink popover, context menu, and editable document.

The editor has no server-rendered output. On Nuxt, render it inside <ClientOnly>. You can also load it with defineAsyncComponent.

Root surface

• DocxEditor: the packaged host and compound components.
• Composables: useDocxEditor, useEditorState, useEditorCommand, useEditorEvent, usePageSetup, useParagraphIndent, and useFontFamily.
• Top-level components: DocxEditorRoot, DocxEditorViewport, DocxEditorContent, DocxEditorToolbar, DocxEditorMenu, DocxEditorNavigation, and DocxEditorPageSetupDialog.

The compound includes DocxEditor.Root, DocxEditor.Viewport, DocxEditor.Content, DocxEditor.Toolbar, DocxEditor.Menu, DocxEditor.Navigation, DocxEditor.HyperLink, and DocxEditor.ContextMenu.

The review module and sidebar require a Pro license. Import the Vue review compound and composables from @docx-editor.dev/pro/vue.

Components, composables, and engine helpers use the package root. The package does not provide /ui, /composables, or /dialogs subpaths. The stylesheet is the only separate export.

Composition primitives

Use the composition primitives when you need custom chrome:

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

<template>
  <DocxEditor.Root :document="bytes">
    <DocxEditor.Toolbar />
    <DocxEditor.Viewport>
      <DocxEditor.Navigation />
      <DocxEditor.Content />
      <DocxEditor.HyperLink />
      <DocxEditor.ContextMenu />
    </DocxEditor.Viewport>
  </DocxEditor.Root>
</template>

Keep DocxEditor.Content inside DocxEditor.Viewport. Place navigation and overlay chrome beside the content.

Toolbar

The package exports the toolbar as DocxEditorToolbar. The host also exposes it as DocxEditor.Toolbar:

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

const bold = useEditorCommand('text.bold');
</script>

<template>
  <button
    @mousedown.prevent
    :disabled="!bold.isEnabled.value"
    :data-active="bold.isActive.value || undefined"
    :title="bold.disabledReason.value ?? 'Bold'"
    @click="bold.execute()"
  >
    Bold
  </button>
</template>

Render this button as a descendant of DocxEditor.Root, such as inside DocxEditor.Toolbar.

Use @mousedown.prevent on custom chrome buttons. This keeps the document caret in place.

Editing API

Use @docx-editor.dev/editor-api/browser to automate the open document. Pass the editor instance that the Vue adapter creates:

import { useDocxEditor } from '@docx-editor.dev/vue';
import { DocxEditor } from '@docx-editor.dev/editor-api/browser';

const editor = useDocxEditor(); // null until the content is mounted
const runtime = DocxEditor.createBrowser(editor.value!);

For object model details, see Editing API.

Next steps

• Vue composition: replace the packaged chrome.
• Vue composables: build reactive controls.
• Vue props: configure <DocxEditor> and its ref.
• Vue examples: use complete integration patterns.
• Vue API reference: inspect all public exports.