Nuxt
Set up a Nuxt DOCX editor with the official module. One line in nuxt.config.ts gives you an auto-imported, SSR-safe DocxEditor component on Nuxt 3 and 4.
By the end of this page you have a Nuxt app that opens a .docx from disk and edits it in the browser. The official module handles the SSR boundary and stylesheet registration.
Install
npm install @eigenpal/nuxt-docx-editorRegister the module
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@eigenpal/nuxt-docx-editor'],
});The module auto-imports an SSR-safe <DocxEditor> and injects the editor stylesheet. You do not need a manual component import, a <ClientOnly> wrapper, or Vite config. Works on Nuxt 3 and 4.
Use the component
Adapted from examples/nuxt/app.vue:
<!-- app.vue -->
<script setup lang="ts">
import { ref } from 'vue';
const buffer = ref<ArrayBuffer | null>(null);
async function onFileSelect(event: Event) {
const file = (event.target as HTMLInputElement).files?.[0];
if (file) buffer.value = await file.arrayBuffer();
}
</script>
<template>
<div style="height: 100vh; display: flex; flex-direction: column">
<div style="padding: 8px">
<input type="file" accept=".docx" @change="onFileSelect" />
</div>
<DocxEditor :document-buffer="buffer" :show-toolbar="true" />
</div>
</template><DocxEditor> never renders during SSR; Nuxt shows a placeholder and hydrates the editor on the client. The component is the Vue adapter registered unchanged, so every prop, event, and ref method from @eigenpal/docx-editor-vue applies.
This page is the short version. Module options (prefix, injectStyles), auto-imported
composables, and what the module does not re-export are covered on the
Nuxt module reference.
Run the example
git clone https://github.com/eigenpal/docx-editor.git
cd docx-editor
bun install
bun run dev:nuxt # http://localhost:3002Next steps
- Nuxt module reference: options, composables, saving via a Nitro route
- Quickstart: the load, edit, save flow in detail
- Loading and saving: URLs, autosave, upload to your API
- Nuxt DOCX editor guide: the long-form walkthrough
- Nuxt example on GitHub