@docx-editor.dev/vue

Use <DocxEditor> for the packaged editor. Use composition to arrange its parts or build your own Vue components.

Install

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

The adapter requires Vue 3 and one shared copy of @docx-editor.dev/core. It 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 styles the editor controls and document layout. 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 use the EigenPal Pro License. Import the Vue review compound and composables from @docx-editor.dev/pro/vue.

Import components, composables, and engine helpers from 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 to arrange toolbars, menus, and document controls:

<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

Use DocxEditorToolbar or its DocxEditor.Toolbar alias for packaged controls. Use a composable to connect your own button:

<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 inside DocxEditor.Root, such as inside DocxEditor.Toolbar.

To choose a subset of packaged controls, set :preset="false" and include the named parts you need. For examples, see Custom toolbar.

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

Export and print

Configure menu.exporters to connect Markdown and PDF conversion handlers. File > Print uses the same PDF handler as File > Export > PDF. PDF conversion runs on your Node.js server and requires the EigenPal Pro License.

For setup, see Export Markdown and PDF and Print documents.

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.