NuxtJS: QuillJS document is not defined

Question

I have a Vue SPA that I'm trying to migrate to Nuxt, and this is my first attempt. I've copied across my components, and have been adding back dependencies to my package.json, however after getting to vue-quill-editor, I've started getting the document is not defined.

Error page frames:

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__

I've tried wrapping the 2 components that use the quill editor in

<client-only>

tags, but that hasn't changed anything at all. Here is one of the components:

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

I've looked at a number of SO threads but none have worked. If any more info is needed just say :)

I appreciate any help

Does this answer your question? [How to fix navigator / window / document is undefined in Nuxt](https://stackoverflow.com/questions/67751476/how-to-fix-navigator-window-document-is-undefined-in-nuxt) — kissu, Mar 23 '22 at 22:00
I'm 90% positive that this will solve your issue. Check the last part. Do you have a [repro]? — kissu, Mar 23 '22 at 22:15
Apologies for the late response, I did manage to get it fixed just 20 mins ago. I had to import globally and set client only, as importing into the component is going to SSR — Flinty926, Mar 24 '22 at 12:02
You will impact your whole website if you import it globally. Did you tried my 3rd solution yet? I mean, you do you if you want to have a package loaded on every page even if you never use it (it will delay the whole initial loading even more). — kissu, Mar 24 '22 at 12:50
My apologies I didn't see the bottom part first time around. I've got stuff rendering now, just need to get certain plugins such as sidebar menu and perfect scrollbar actually working now. Thank you — Flinty926, Mar 24 '22 at 14:08

score 2 · Answer 1 · answered Jun 11 '23 at 13:42

2

I was able to solve this issue in Nuxt3. We can not load quill on server side because Quill library relies heavily on DOM APIs so, will have to load it on client only like I have done below.

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

answered Jun 11 '23 at 13:42

Suman Timalsina

61
1
5

My team have implemented Quill in Nuxt 3. I'll take a look and let you know if we did anything differently, but using ClientOnly is typically the only way to render things like this; all very dom dependent – Flinty926 Jun 13 '23 at 11:10

score 0 · Accepted Answer · answered Jul 30 '22 at 05:58

0

in nuxt 3 you have to install plugin globally. Example:in directory plugins create js/ts file:

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

then declare it in nuxt.config.ts

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

answered Jul 30 '22 at 05:58

Jasurbek Abdukhalikov

16
2

1

You don't **HAVE** to install it globally no. – kissu Jul 30 '22 at 14:03
also not necessary to register a plugin in nuxt 3, its auto imported – DonMB Jan 13 '23 at 09:31

score 0 · Answer 3 · answered Jun 23 '23 at 13:26

In nuxt3(v3.5.3), quill(v1.3.7) and @vueup/vue-qill(v1.2.0) all you need to do is create client side plugin eg. /plugins/quillEditor.client.ts - the client in the file name makes the plugin client side.

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

NuxtJS: QuillJS document is not defined

3 Answers3