2

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

Mani Mirjavadi
  • 901
  • 10
  • 18
Flinty926
  • 33
  • 2
  • 4
  • 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've had a look at that one too, sadly not helpful :( – Flinty926 Mar 23 '22 at 22:04
  • 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

0 Answers0