@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 of the adapter. Install both with 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 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 next to the content in the viewport.

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.