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

Aegean

Does this answer your question? How to fix navigator / window / document is undefined in Nuxt – Debarath

I've had a look at that one too, sadly not helpful :( – Aegean

I'm 90% positive that this will solve your issue. Check the last part. Do you have a minimal reproducible example? – Debarath

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

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). – Debarath

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

Answer 1

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>

Aerobic

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

Answer 2

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

Ellisellison

You don't HAVE to install it globally no. – Debarath

also not necessary to register a plugin in nuxt 3, its auto imported – Fourdimensional

Answer 3

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

Glyptodont