NuxtJS：QuillJS 文档未定义

Question

我有一个 Vue SPA，正在尝试迁移到 Nuxt，这是我的第一次尝试。我已经复制了我的组件，并且已经将依赖项添加回我的 package.json，但是在进入 vue-quill-editor 后，我开始发现文档未定义。

错误页框：

ReferenceError
document is not defined

node_modules/quill/dist/quill.js:7661:12
node_modules/quill/dist/quill.js:36:30
__webpack_require__
node_modules/quill/dist/quill.js:1030:1
node_modules/quill/dist/quill.js:36:30
__webpack_require__
node_modules/quill/dist/quill.js:5655:14
node_modules/quill/dist/quill.js:36:30
__webpack_require__
node_modules/quill/dist/quill.js:10045:13
node_modules/quill/dist/quill.js:36:30
__webpack_require__

我尝试将使用鹅毛笔编辑器的两个组件包装在

ReferenceError
document is not defined

node_modules/quill/dist/quill.js:7661:12
node_modules/quill/dist/quill.js:36:30
__webpack_require__
node_modules/quill/dist/quill.js:1030:1
node_modules/quill/dist/quill.js:36:30
__webpack_require__
node_modules/quill/dist/quill.js:5655:14
node_modules/quill/dist/quill.js:36:30
__webpack_require__
node_modules/quill/dist/quill.js:10045:13
node_modules/quill/dist/quill.js:36:30
__webpack_require__

标签，但这根本没有改变任何东西。这是其中一个组件：

<client-only>

<template>
  <client-only>
    <div>
        <b-card no-body class="mt-4">
            <b-card-header>
                Notes
            </b-card-header>
            <b-card-body>
                <quill-editor v-model="contents" :content="contents"></quill-editor>
            </b-card-body>
        </b-card>
    </div>
  </client-only>
</template>

<script>

我查看了许多 SO 线程，但没有一个起作用。如果需要更多信息，请说:)

我很感激任何帮助

Answer 1

我在 Nuxt3 中解决了这个问题。我们无法在服务器端加载 quill，因为 Quill 库严重依赖 DOM API，因此必须仅在客户端加载它，就像我在下面所做的那样。

 <template>
    <ClientOnly fallback-tag="div" fallback="Loading editor...">
        <QuillEditor theme="snow" />
    </ClientOnly>
 </template>

<script setup lang="ts">
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
</script>