Nuxt SSR vue-quill-editor ReferenceError document is not defined

Question

I'm trying to use Vue Quill Editor in my Nuxt SSR project. However, it is giving me 'ReferenceError dcument not defined'

<template>
  <section class="px-6">
    <h1>This is weird</h1>
    <no-ssr placeholder="Loading...">
      <p>startof</p>
      <quillEditor v-model="value" />
      <p>endof</p>
    </no-ssr>
  </section>
</template>

<script>
import 'quill/dist/quill.snow.css'
import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    // quillEditor
  },
  data: () => ({
    value: ''
  })
}
</script>

error message screenshot

I also tried dynamically importing the component

<template>
  <section class="px-6">
    <h1>This is weird</h1>
    <no-ssr placeholder="Loading...">
      <p>startof</p>
      <quillEditor v-model="value" />
      <p>endof</p>
    </no-ssr>
  </section>
</template>

<script>
export default {
  components: {
    quillEditor: () => import('vue-quill-editor')
  },
  data: () => ({
    value: ''
  })
}
</script>

which gives and error in my console

ERROR  [Vue warn]: Failed to resolve async component: () => Promise.resolve(/*! import() */).then(__webpack_require__.t.bind(null, /*! vue-quill-editor */ "vue-quill-editor", 7))
Reason: ReferenceError: document is not defined

but runs in browser runs in browser but doesn't shows Text Editor screenshot

I need a Text Editor which outputs in Markdown. Any replacement for this package is welcomed.

Answer 1

use as plugin.

make vue-quill-editor.js inside plugins folder.

import Vue from 'vue'
import Quill from 'quill'
import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'


Vue.use(VueQuillEditor)

register inside nuxt.config.js

module.exports = {
    env : {}
    build: {
        new webpack.ProvidePlugin({
            'window.Quill': 'quill/dist/quill.js',
            'Quill': 'quill/dist/quill.js'
        }),
    },
    plugins: [
        { src: '~plugins/vue-quill-editor', ssr: false}
    ]

}