@eigenpal/nuxt-docx-editor

Nuxt 3 & 4 module for the docx-editor. Wraps @eigenpal/docx-editor-vue and auto-imports an SSR-safe <DocxEditor> component — no manual import, no <ClientOnly> boilerplate.

Quick Start

npm install @eigenpal/nuxt-docx-editor

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@eigenpal/nuxt-docx-editor'],
});

<script setup lang="ts">
import { ref } from 'vue';

const buffer = ref<ArrayBuffer | null>(null);

async function loadFile(e: Event) {
  const file = (e.target as HTMLInputElement).files?.[0];
  buffer.value = file ? await file.arrayBuffer() : null;
}
</script>

<template>
  <input type="file" accept=".docx" @change="loadFile" />
  <DocxEditor v-if="buffer" :document-buffer="buffer" mode="editing" />
</template>

That's the whole integration. The module registers <DocxEditor> as client-only — the editor drives a hidden ProseMirror instance and browser DOM APIs, so it never runs during SSR. Nuxt renders a placeholder on the server and hydrates the editor in the browser. The module also pushes the editor stylesheet into Nuxt's CSS pipeline, so the toolbar is styled without a manual import.

Options

export default defineNuxtConfig({
  modules: ['@eigenpal/nuxt-docx-editor'],
  docxEditor: {
    prefix: 'Ep', // <EpDocxEditor> instead of <DocxEditor>
    injectStyles: true, // push @eigenpal/docx-editor-vue/styles.css into nuxt.options.css
  },
});

| Option | Type | Default | Description | | -------------- | --------- | ------- | ---------------------------------------------------------------------- | | prefix | string | '' | Component name prefix. 'Ep' registers <EpDocxEditor>. | | injectStyles | boolean | true | Set false to import @eigenpal/docx-editor-vue/styles.css yourself. |

Packages

| Package | Description | | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | @eigenpal/docx-editor-react |   React adapter. Toolbar, paged editor, plugins. | | @eigenpal/docx-editor-vue |   Vue 3 adapter. Toolbar, paged editor, plugins. | | @eigenpal/nuxt-docx-editor |   Nuxt 3 & 4 module wrapping the Vue adapter. | | @eigenpal/docx-editor-core | Framework-agnostic core: OOXML parser, serializer, layout engine, ProseMirror schema. Depend on this if you fork the React or Vue adapter. | | @eigenpal/docx-editor-i18n | Shared locale strings and types consumed by both adapters. | | @eigenpal/docx-editor-agents | Agent SDK and chat UI: framework-agnostic bridge, MCP server, AI SDK adapters, plus React UI. |

Component API

<DocxEditor> is the Vue adapter's component, registered unchanged — the same props, emits, and DocxEditorRef methods. Full reference: docx-editor.dev/docs/props.

Composables

The Vue composables (useDocxEditor, useZoom, useFindReplace, useAutoSave, ...) are auto-imported — use them in any component or page without an import:

<script setup lang="ts">
const { save } = useAutoSave(/* ... */);
</script>

Beyond the component

Other @eigenpal/docx-editor-vue surfaces — renderAsync, createEmptyDocument, the DocxEditorProps/DocxEditorRef types, and the /ui, /dialogs, /plugin-api subpaths — are not re-exported by this module. Import them from the adapter directly, and add it to your own dependencies so the import is explicit:

npm install @eigenpal/docx-editor-vue

import { renderAsync, createEmptyDocument } from '@eigenpal/docx-editor-vue';

Contributing

Contributions welcome. See CONTRIBUTING.md for setup, tests, and the one-time CLA signature.

Commercial Support

[!TIP] Questions or custom features? Email [email protected].