How to use quill-image-drop-module in Vue 3?

Question

I use vueup/vue-quill for Vue 3 and want to use kensnyder/quill-image-drop-module.

This is my code :

Main.js

import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import Quill from 'quill';
import { ImageDrop } from 'quill-image-drop-module';
Quill.register('modules/imageDrop', ImageDrop)

createApp(App).component('QuillEditor', QuillEditor).mount('#app')

Editor.vue

<template>
  <QuillEditor :modules="modules" theme="snow" />
</template>

<script>
  import { QuillEditor } from '@vueup/vue-quill';
  import '@vueup/vue-quill/dist/vue-quill.snow.css';

  export default {
    components: {
      QuillEditor,
    },
    data() {
      return {
        modules: {
          imageDrop: true,
        },
      };
    }
  }
</script>

If I run the code above, I got an error :

How to fix this error?

Are quill-image-drop-module works on Vue 3?

Mirosław Mirosław · Accepted Answer · 2021-12-16T10:34:04

Provide to <QuillEditor> a prop called toolbar (ex. toolbar='minimal'). vue-quill is creating options for Quill and only when toolbar prop is present it creates an object key modules that it uses to register other modules.

How to use quill-image-drop-module in Vue 3?

1 Answers