Nuxt Integration

export default defineNuxtConfig({
  ssr: false,
  css: ['superdoc/style.css'],
  compatibilityDate: '2025-07-15',
})

<script setup lang="ts">
import { SuperDoc } from 'superdoc';
import { superdocFonts } from '@superdoc-dev/fonts';

const container = ref<HTMLDivElement | null>(null);
const file = ref<File | null>(null);

let superdoc: SuperDoc | null = null;

const handleFile = (e: Event) => {
  const input = e.target as HTMLInputElement;
  if (input.files?.[0]) file.value = input.files[0];
};

const initEditor = () => {
  if (!container.value || !file.value) return;
  superdoc?.destroy();
  superdoc = new SuperDoc({
    selector: container.value,
    document: file.value,
    fonts: superdocFonts,
  });
};

watch(file, initEditor);
onBeforeUnmount(() => superdoc?.destroy());
</script>

<template>
  <div>
    <div style="padding: 1rem; background: #f5f5f5">
      <input type="file" accept=".docx" @change="handleFile" />
    </div>
    <div ref="container" style="height: calc(100vh - 60px)" />
  </div>
</template>

<script setup lang="ts">
import { SuperDoc } from 'superdoc';

const props = defineProps<{
  document: string | File | Blob;
}>();

const editor = ref<HTMLDivElement | null>(null);
let superdoc: SuperDoc | null = null;

onMounted(() => {
  if (!editor.value) return;
  superdoc = new SuperDoc({
    selector: editor.value,
    document: props.document,
    documentMode: 'editing',
  });
});

onBeforeUnmount(() => superdoc?.destroy());

const setMode = (mode: 'editing' | 'suggesting' | 'viewing') => {
  superdoc?.setDocumentMode(mode);
};

const exportFinal = async () => {
  await superdoc?.export({ isFinalDoc: true });
};
</script>

<template>
  <div>
    <div class="controls">
      <button @click="setMode('editing')">Edit</button>
      <button @click="setMode('suggesting')">Review</button>
      <button @click="setMode('viewing')">View</button>
      <button @click="exportFinal">Export Final</button>
    </div>
    <div ref="editor" class="editor-container" />
  </div>
</template>

<style scoped>
.editor-container {
  height: 700px;
  border: 1px solid #e2e8f0;
}
.controls {
  padding: 1rem;
  display: flex;
  gap: 0.5rem;
}
</style>

<script setup lang="ts">
const file = ref<File | null>(null);

const handleFile = (e: Event) => {
  const input = e.target as HTMLInputElement;
  if (input.files?.[0]) file.value = input.files[0];
};
</script>

<template>
  <div>
    <input type="file" accept=".docx" @change="handleFile" />
    <DocEditor v-if="file" :document="file" />
  </div>
</template>