Nuxt3集成Quill富文本编辑器报错：Document is not defined

问题根源是Quill依赖浏览器环境的document对象，而Nuxt3的SSR（服务端渲染）会在服务器端预执行组件代码，此时不存在浏览器环境的API，导致报错。以下是可行的解决方案：

1. 组件内仅在客户端加载并初始化Quill #

修改你的RichTextEditor组件，确保仅在客户端环境下导入Quill并完成初始化：

<template>
  <div ref="editorContainer"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const editorContainer = ref(null)
let quillInstance = null

// 仅在客户端环境导入Quill
if (process.client) {
  import('quill').then(({ default: Quill }) => {
    onMounted(() => {
      // 确保DOM元素已挂载后初始化编辑器
      if (editorContainer.value) {
        quillInstance = new Quill(editorContainer.value, {
          theme: 'snow',
          placeholder: '开始输入内容...'
          // 其他自定义配置
        })
      }
    })
  })
}
</script>

<style scoped>
/* 导入Quill的基础样式 */
@import 'quill/dist/quill.snow.css';
</style>

2. 父页面中正确使用动态导入+ClientOnly #

在调用编辑器的页面中，通过defineAsyncComponent动态导入组件并禁用SSR，同时用ClientOnly包裹：

<template>
  <div class="editor-page">
    <ClientOnly>
      <RichTextEditor />
      <template #fallback>
        <p>编辑器加载中...</p>
      </template>
    </ClientOnly>
  </div>
</template>

<script setup>
// 动态导入组件并禁用服务端渲染
const RichTextEditor = defineAsyncComponent({
  loader: () => import('~/components/RichTextEditor.vue'),
  ssr: false
})
</script>

3. 全局插件的正确写法（若你使用全局注册） #

如果之前尝试全局注册Quill插件，需修改插件代码，确保仅在客户端初始化：

// plugins/quill.client.js
export default defineNuxtPlugin(nuxtApp => {
  // 仅在客户端执行
  const Quill = require('quill').default
  nuxtApp.provide('quill', Quill)
})

注意文件名后缀.client.js，Nuxt3会自动识别这是仅客户端运行的插件，无需额外判断process.client。

关键注意事项 #

• 确保Quill的样式文件正确导入，否则编辑器会显示异常
• 避免在setup顶层直接执行Quill初始化代码，必须放在onMounted或客户端判断内
• ClientOnly的fallback插槽可以添加加载提示，提升用户体验

内容的提问来源于stack exchange，提问作者Yash Saradva