How to add modules for Vue quill editor in NuxtJS 3

Question

template

<client-only v-if="changeContent">
  <quill-editor
   v-model:content="content"
   content-type="html"
   theme="snow"
   toolbar="full"
   :modules="modules"
  />
</client-only>

script

<script setup lang="ts">
  import '@vueup/vue-quill/dist/vue-quill.snow.css'
  import EditIcon from '@/assets/icons/edit.svg'
  import SaveIcon from '@/assets/icons/save.svg'

  let modules: {}
  if (!process.server) {
    const { QuillEditor, Quill } = await import('@vueup/vue-quill')
    const { vueApp } = useNuxtApp()
    if (!vueApp._context.components.QuillEditor)
      vueApp.component('QuillEditor', QuillEditor)

    const ImageUploader = await import('quill-image-uploader')
    const BlotFormatter = await import('quill-blot-formatter')

    modules = [
      {
        name: 'imageUploader',
        module: ImageUploader,
        upload: (file: any) => {
          return new Promise((resolve, reject) => {
            const formData = new FormData()
            formData.append('image', file)
          })
        }
      },
      {
        name: 'blotFormatter',
        module: BlotFormatter,
        options: {}
      }
    ]
  }
</script>

I got this error

TypeError: moduleClass is not a constructor
at SnowTheme2.addModule (quill.js:6130:28)
at SnowTheme2.addModule (quill.js:6774:121)
at quill.js:6122:17
at Array.forEach (<anonymous>)
at SnowTheme2.init (quill.js:6120:41)
at new Quill2 (quill.js:1163:16)
at initialize (vue-quill.esm-bundler.js:144:21)
at vue-quill.esm-bundler.js:118:13
at runtime-core.esm-bundler.js:2739:40
at callWithErrorHandling (runtime-core.esm-bundler.js:157:22)

I have followed the instructions of this document VueQuill

Answer 1

I think given that the dist output is in UMD format, you would need to do something like the following:

<script setup lang="ts">
  import '@vueup/vue-quill/dist/vue-quill.snow.css'
  import EditIcon from '@/assets/icons/edit.svg'
  import SaveIcon from '@/assets/icons/save.svg'

  let modules: {}
  if (!process.server) {
    const { QuillEditor, Quill } = await import('@vueup/vue-quill')
    const { vueApp } = useNuxtApp()
    if (!vueApp._context.components.QuillEditor)
      vueApp.component('QuillEditor', QuillEditor)

    const ImageUploader = await import('quill-image-uploader')
    const BlotFormatter = await import('quill-blot-formatter')

    modules = [
      {
        name: 'imageUploader',
        module: ImageUploader.default, //add .default
        upload: (file: any) => {
          return new Promise((resolve, reject) => {
            const formData = new FormData()
            formData.append('image', file)
          })
        }
      },
      {
        name: 'blotFormatter',
        module: BlotFormatter,
        options: {}
      }
    ]
  }
</script>

https://github.com/kensnyder/quill-image-resize-module/issues/99