NuxtJS:QuillJS文档未定义

Question

我有一个Vue SPA，我正试图将其迁移到Nuxt，这是我的第一次尝试。我已经跨组件进行了复制，并将依赖项添加回了我的package.json中，但在使用vue-quill编辑器后，我开始得到未定义的文档。

错误页面帧：

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__

我已经尝试在中包装使用quill编辑器的2个组件

<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>

import { quillEditor } from "vue-quill-editor";

我看了很多SO线程，但都没有成功。如果需要更多信息，只需说：(

我感谢的任何帮助

Answer 1

我能够在Nuxt3中解决这个问题。我们不能在服务器端加载quill，因为quill库严重依赖于DOMAPI，所以只能像我下面所做的那样在客户端加载它。

<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>

Answer 2

在nuxt 3中，您必须全局安装插件。示例：在目录中插件创建js/ts文件：

import { defineNuxtPlugin } from '#app';
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
export default defineNuxtPlugin((nuxtapp) => {
nuxtapp.vueApp.component('QuillEditor', QuillEditor)
})

然后在nuxt.config.ts 中声明

plugins: ['~/plugins/quill.ts']

Answer 3

在nuxt3(v3.5.3(、quill(v1.3.7(和@vueup/vue-qill(v1.2.0(中，您所需要做的就是创建客户端插件，例如/plugins/quillEditor.client.ts-文件名中的client使插件成为客户端插件。

import { defineNuxtPlugin } from '#app';
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
export default defineNuxtPlugin((nuxtapp) => {
nuxtapp.vueApp.component('QuillEditor', QuillEditor)
})