Document is not defined in nuxt3

Question

in nuxt3 i am trying to use Quill Rich Text Editor. When i run the project main or index file is opening properly but when i am trying to open the page containing the Quill Editor it shows error

Document is not defined

here is code of RichTextEditor

<script setup>
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { ref, computed } from "vue";

const props = defineProps({
    modelValue: {
        type: String,
        default: "",
    },
    text: {
        type: String,
        default: "",
    },
    styleP: {
        type: String,
        default: "",
    },
});

const quillEditorRef = ref(null);

const toolbarOptions = [
    [{ direction: "rtl" }],
    [{ size: ["small", false, "large", "huge"] }],
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    [{ font: [] }],
    [{ header: 1 }, { header: 2 }],
    [{ color: [] }, { background: [] }],
    ["bold", "italic", "underline", "strike"],
    [{ script: "sub" }, { script: "super" }],
    [{ list: "ordered" }, { list: "bullet" }],
    [{ align: [] }],
    [{ indent: "-1" }, { indent: "+1" }],
    ["blockquote"],
    ["image", "video", "link"],
    ["code-block"],
    ["clean"],
];

const emit = defineEmits(["update:modelValue", "update:text"]);

const data = ref("");

watchEffect(() => {
    data.value = props.modelValue;
});

watchEffect(() => {
    emit("update:modelValue", data.value);
    if (quillEditorRef?.value?.getText()) {

        emit("update:text", quillEditorRef?.value?.getText());
    }
});

console.log(props.modelValue, " : model");
</script>

<template>
    <div>
        <QuillEditor style="min-height: 30vh" theme="snow" :toolbar="toolbarOptions" content-type="html"
            v-model:content="data" ref="quillEditorRef" :style="props.styleP" />
    </div>
</template>

here is the code of page i which i am calling the RichTextEditor component

<template>
    <div>
        <RichTextEditor />
    </div>
</template>

<script>
import RichTextEditor from "@/components/AfterAuth/Blog/RichTextEditor.vue"
</script>

here is package.json file code

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@fortawesome/free-brands-svg-icons": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.1",
    "@iconify/vue": "^4.1.1",
    "@nuxt/postcss8": "^1.1.3",
    "@nuxtjs/fontawesome": "^1.1.2",
    "@nuxtjs/tailwindcss": "^5.3.5",
    "@pinia/nuxt": "^0.4.2",
    "@tailwindcss/forms": "^0.5.3",
    "@types/chart.js": "^2.9.37",
    "autoprefixer": "^10.4.14",
    "nuxt": "3.5.1",
    "postcss": "^8.4.23",
    "sass": "^1.57.0",
    "tailwindcss": "^3.3.1"
  },
  "dependencies": {
    "@aws-amplify/ui-vue": "^3.0.4",
    "@fortawesome/fontawesome-free": "^6.4.0",
    "@fortawesome/fontawesome-svg-core": "^6.2.1",
    "@fortawesome/vue-fontawesome": "^3.0.2",
    "@headlessui/vue": "^1.4.2",
    "@jridgewell/sourcemap-codec": "^1.4.14",
    "@mdi/js": "^7.0.96",
    "@rollup/plugin-inject": "^5.0.2",
    "@rollup/plugin-terser": "^0.2.0",
    "@vueup/vue-quill": "^1.2.0",
    "aws-amplify": "^5.0.5",
    "jquery": "^3.6.4",
    "numeral": "^2.0.6",
    "owl.carousel": "^2.3.4",
    "paper": "^0.12.17",
    "pinia": "^2.0.35",
    "readable-stream": "^4.2.0",
    "rollup-plugin-node-polyfills": "^0.2.1",
    "tw-elements": "^1.0.0-beta2",
    "uuid4": "^2.0.3",
    "vue": "^3.2.33",
    "vue-number-animation": "^1.1.2"
  }
}

tried solutions but didn't work

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

Installed plugin globally

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

When I try to run I expected that RichTextEditor will show up but instead error shows up

Answer 1

I have a working example here. By following it, it should be working for you.

npm i @vueup/vue-quill

app.vue

<script setup lang="ts">
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
</script>
<template>
  <div>
    <ClientOnly>
      <QuillEditor theme="snow" />
    </ClientOnly>
  </div>
</template>
<style scoped lang="css">
:deep(.ql-editor) {
  min-height: 200px;
}
:deep(.ql-toolbar.ql-snow) {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
:deep(.ql-container.ql-snow) {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
</style>

https://stackblitz.com/edit/nuxt-starter-ibc8jw?file=pages%2Findex.vue

More info on Github thread https://github.com/vueup/vue-quill/issues/161#issuecomment-1493167055

Hope that helps you.