vue-quill-editor: Can't find variable: Quill when registering Quill modules

The solution for installing plugins like quill-image-resize-module in a Nuxt/SSR app:

1. In your plugins folder, create a plugin for vue-quill-plugin:

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'

import ImageResize from 'quill-image-resize-module'

Quill.register('modules/imageResize', ImageResize)

Vue.use(VueQuillEditor)

1. Add the vue-quill-editor as a no-SSR plugin in nuxt.config.js:

module.exports = {
  plugins: [
    { src: '~plugins/vue-quill-editor', ssr: false }
  ]
}

1. Again in nuxt.config.js, add Quill as a Webpack plugin so that Quill modules like quill-image-resize-module that use Webpack can find the Quill reference:

module.exports = {
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
      })
    ]
  }
}

1. Finally, add the component into your page (e.g., in pages/index.vue):

<template>
  <div>
    <no-ssr>
      <quill-editor
        v-model='editorContent'
        ref='textEditor'
        :options='editorOption'
       ></quill-editor>
    </no-ssr>
  </div>
</template>

<script>
export default {
  data () {
    return {
      editorContent: '',
      editorOption: {
        placeholder: 'What’s on your mind?',
        theme: 'snow',
        modules: {
          imageResize: true
        }
      }
    }
  }
}
</script>

Okay so I was able to solve this problem for SPA apps by doing this:

1. You will have to make a new file called vue.config.js

2. Paste this code in there:

var webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
      }),
    ]
  }
}

What this does is it helps Vue import quill and help register the Image resize module

1. Finally paste the code below in your component:

import Quill from 'quill'
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)

and in the options for quill, make the modules true as such:

editor_option: {
 modules: {
   imageDrop: true,
   imageResize: true,
 },
 theme: 'snow'
},

and voila! The image resize and drop should work.

@aral Thank you for the snippet, You saved me from hours of frustration! I had to make the following modifications for it to work (for me)

1: in the plugin file

import Vue from 'vue'
import VueQuillEditor, {Quill} from 'vue-quill-editor'
import ImageResize from 'quill-image-resize-module'

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

Quill.register('modules/imageResize', ImageResize)
Vue.use(VueQuillEditor)

2: in nuxt.config.js

var webpack = require('webpack')

Thank you!

(Ah, and quill-image-drop-module doesn’t use Webpack.)

This solution solved my problem! In nuxt.config.js

import webpack from 'webpack' export default { // Global page headers (https://go.nuxtjs.dev/config-head)

// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins) plugins: [ { src: '~plugins/nuxt-quill-plugin', ssr: false } ],

build: { plugins: [ new webpack.ProvidePlugin({ 'window.Quill': 'quill/dist/quill.js', 'Quill': 'quill/dist/quill.js' }) ]

In plugins > nuxt-quill-plugin.js

`import Vue from ‘vue’ import VueQuillEditor, { Quill } from ‘vue-quill-editor’ import ImageResize from ‘quill-image-resize-module’

import ‘quill/dist/quill.core.css’ import ‘quill/dist/quill.snow.css’ import ‘quill/dist/quill.bubble.css’

Quill.register(‘modules/imageResize’, ImageResize) Vue.use(VueQuillEditor) `

Hi. Nice work on this!

For a non SSR app (using Vue CLI 3) I am also having this same issue: “Quill is not loaded in this application” when I try to import modules.

Have I done something wrong here?

import VueQuillEditor, {Quill} from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import {Markup, MarkupMode} from 'quill-markup';

Quill.register('modules/markup', Markup)
Vue.use(VueQuillEditor)