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

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>

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

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