NuxtJS: QuillJS document is not defined

user_10092887 0
Viewed 954

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

vue-quill-editor quill nuxt.js vue.js
1 Answers

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

user_196519760
Related