nuxt 3 error: document is not defined

[RezaErfani67]

i am adding quill as client plugin and it works good but i cant add this module for it:

QuillEditor.client.ts

import { defineNuxtPlugin } from "#app"; 
import { QuillEditor } from '@vueup/vue-quill'

export default defineNuxtPlugin(
    nuxtApp => {
        nuxtApp.vueApp.component('QuillEditor',  QuillEditor); 
    })

main component code:

<template>
    <client-only>
    <QuillEditor :modules="modules" toolbar="full" />
</client-only>
  </template>
  
  <script>
    import ImageUploader from 'quill-image-uploader'; 
  export default ({
  
    setup: () => {
      const modules = {
          name: 'imageUploader',
          module: ImageUploader,
          options: {
            upload: file => {
              return new Promise((resolve, reject) => {
                const formData = new FormData();
                formData.append("image", file);
  
                $fetch.post('/upload-image', formData)
                .then(res => {
                  console.log(res)
                  resolve(res.data.url);
                })
                .catch(err => {
                  reject("Upload failed");
                  console.error("Error:", err)
                })
              })
            }
    }
  };



  return { modules }
}

})
  </script>

[mschadev]

I had the same problem, but I solved it. First, create QuillEditor wrapper component

// components/QuillEditorWrapper.client.vue <-- important!

<template>
    <QuillEditor :modules="modules" toolbar="full" />
</template>

<script>
import ImageUploader from "quill-image-uploader";
export default {
  setup: () => {
    const modules = {
      name: "imageUploader",
      module: ImageUploader,
      options: {
        upload: (file) => {
          return new Promise((resolve, reject) => {
            const formData = new FormData();
            formData.append("image", file);

            $fetch
              .post("/upload-image", formData)
              .then((res) => {
                console.log(res);
                resolve(res.data.url);
              })
              .catch((err) => {
                reject("Upload failed");
                console.error("Error:", err);
              });
          });
        },
      },
    };

    return { modules };
  },
};
</script>

Second, use QuillEditorWrapper component

// pages/index.vue
<template>
  <QuillEditorWrapper/>
</template>

Reference

• https://v3.nuxtjs.org/guide/directory-structure/components#client-components

[gspgsp]

this is useful, but sometimes this tip 'document is not found' may still exist, you can just adjust the component introduction method.

[FrazeColder]

I am facing: document is not defined. My component is named Quill.client.vue. What am I doing wrong here?

This is my code:

<template>
  <QuillEditor :modules="modules" toolbar="full" />
</template>

<script>
import { QuillEditor } from '@vueup/vue-quill'
import ImageUploader from "quill-image-uploader";
export default {
  setup: () => {
    const modules = {
      name: "imageUploader",
      module: ImageUploader,
      options: {
        upload: (file) => {
          return new Promise((resolve, reject) => {
            const formData = new FormData();
            formData.append("image", file);

            $fetch
                .post("/upload-image", formData)
                .then((res) => {
                  console.log(res);
                  resolve(res.data.url);
                })
                .catch((err) => {
                  reject("Upload failed");
                  console.error("Error:", err);
                });
          });
        },
      },
    };

    return { modules };
  },
  components: {
    QuillEditor,
  },
};
</script>