@eigenpal/nuxt-docx-editor

@eigenpal/nuxt-docx-editor is the official Nuxt module. It wraps @eigenpal/docx-editor-vue and registers an SSR-safe <DocxEditor> as an auto-imported component, so a Nuxt app needs no manual import, no <ClientOnly> wrapper, and no Vite config. It supports Nuxt 3 and Nuxt 4.

For a step-by-step walkthrough with loading, saving, tracked changes, and collaboration, see the Nuxt DOCX editor guide.

Install

npm install @eigenpal/nuxt-docx-editor

Pulls in @eigenpal/docx-editor-vue, and transitively @eigenpal/docx-editor-core and @eigenpal/docx-editor-i18n.

Register the module

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

That is the whole setup. The module registers <DocxEditor> as a client-only component and pushes the editor stylesheet into Nuxt's CSS pipeline.

Use the component

<script setup lang="ts">
import { ref } from "vue";
 
const buf = ref<ArrayBuffer | null>(null);
</script>
 
<template>
  <DocxEditor :document-buffer="buf" />
</template>

No import, no <ClientOnly>. <DocxEditor> is the Vue adapter's component, registered unchanged: the same props (document-buffer, mode, show-toolbar, external-plugins, and the rest), events, and DocxEditorRef methods as @eigenpal/docx-editor-vue. The full prop list is on Vue props. It renders in the browser only (ProseMirror measures DOM geometry at mount), so Nuxt shows a placeholder during SSR and hydrates the editor on the client.

Load a document

document-buffer takes an ArrayBuffer. A null buffer mounts an empty document; assign a real buffer to load a .docx. Here is a file picker that lets users open their own documents, with @error wired for unreadable input:

<script setup lang="ts">
import { ref } from "vue";
 
const buf = ref<ArrayBuffer | null>(null);
 
async function onFile(e: Event) {
  const file = (e.target as HTMLInputElement).files?.[0];
  if (file) buf.value = await file.arrayBuffer();
}
</script>
 
<template>
  <input type="file" accept=".docx" @change="onFile" />
  <DocxEditor
    v-if="buf"
    :document-buffer="buf"
    @error="(err) => console.error(err)"
  />
</template>

To save, call save() on the component's DocxEditorRef; it returns an ArrayBuffer of OOXML bytes, the same format the editor reads. The Nuxt DOCX editor guide covers loading from a URL, saving to a download or a Nitro route, tracked changes, and collaboration.

Options

export default defineNuxtConfig({
  modules: ["@eigenpal/nuxt-docx-editor"],
  docxEditor: {
    prefix: "Ep",
    injectStyles: true,
  },
});

Composables

Every composable from @eigenpal/docx-editor-vue/composables (useDocxEditor, useTrackedChanges, useFindReplace, useAutoSave, and the rest) is auto-imported. Use them in any page or component with no import.

What the module does not re-export

The module re-exports the <DocxEditor> component and the composables, not the whole adapter. These come from @eigenpal/docx-editor-vue directly:

• the DocxEditorProps and DocxEditorRef types
• renderAsync, createEmptyDocument
• the /ui, /dialogs, and /plugin-api subpaths

If you use any of them, add the adapter to your own dependencies so the import is explicit:

npm install @eigenpal/docx-editor-vue

Where to next

• Nuxt DOCX editor guide: full walkthrough with loading, saving, collaboration, and agents
• Vue package overview: the adapter the module wraps
• Vue API reference: auto-generated from the d.ts
• Nuxt example on GitHub