Vite with Vue

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

// src/main.ts
import { createApp } from 'vue';
import '@docx-editor.dev/vue/styles.css';
import App from './App.vue';

createApp(App).mount('#app');

<script setup lang="ts">
import { ref } from 'vue';
import { DocxEditor, type DocxEditorRef } from '@docx-editor.dev/vue';

const editorRef = ref<DocxEditorRef | null>(null);
const documentBytes = ref<ArrayBuffer>();
const fileName = ref('document.docx');

async function openDocument(event: Event) {
  const input = event.target as HTMLInputElement;
  const file = input.files?.[0];
  if (!file) return;

  documentBytes.value = await file.arrayBuffer();
  fileName.value = file.name;
}

async function saveDocument() {
  const bytes = await editorRef.value?.save();
  if (!bytes) return;

  const type = ['application/vnd.openxmlformats-officedocument', 'wordprocessingml.document'].join(
    '.'
  );
  const url = URL.createObjectURL(new Blob([bytes], { type }));
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName.value;
  link.click();
  URL.revokeObjectURL(url);
}
</script>

<template>
  <div class="app">
    <div class="actions">
      <label>
        Open DOCX
        <input type="file" accept=".docx" @change="openDocument" />
      </label>
      <button type="button" @click="saveDocument">Save DOCX</button>
    </div>
    <div class="editor-host">
      <DocxEditor ref="editorRef" :document="documentBytes ?? 'blank'" />
    </div>
  </div>
</template>

<style>
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.actions {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
}

.editor-host {
  flex: 1;
  min-height: 0;
}
</style>

git clone https://github.com/eigenpal/docx-editor.git
cd docx-editor
bun install
bun run dev:vue