Can't find variable: Quill when registering Quill modules

BUG REPORT TEMPLATE

Vue.js version and component version

Nuxt 1.3.0, Vue 2.5.13

Reproduction Link

n/a (issue has to do with Quill module usage in Nuxt)

Steps to reproduce

1. In Nuxt, add a module during the configuration of the vue-quill-editor plugin (plugins/vue-quill-editor.js):

/* Client-side Quill Editor 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'

// Add Markdown Shortcuts plugin: this allows the use of
// e.g., # Heading 1, **bold** etc., to trigger style changes.
// This is the module I managed to solve by forking the original, removing all Webpack-related stuff, and importing the classes directly: https://github.com/aral/quill-markdown-shortcuts-for-vue-quill-editor
import MarkdownShortcuts from 'quill-markdown-shortcuts-for-vue-quill-editor'
Quill.register('modules/markdownShortcuts', MarkdownShortcuts)

// This is the module I encountered the same problem on:
import Emoji from 'quill-emoji/dist/quill-emoji.js'
Quill.register('modules/emoji', Emoji)

Vue.use(VueQuillEditor)

In my Nuxt config, I have it set up so that Nuxt does not apply SSR:

  plugins: [
    '~plugins/buefy',
    { src: '~plugins/vue-quill-editor', ssr: false }
  ],

What is Expected?

It should work.

What is actually happening?

Error: Can’t find variable: Quill.

I’ve documented how I managed to solve this for one module here: https://github.com/aral/quill-markdown-shortcuts-for-vue-quill-editor

However, I’ve just encountered the same issue on another component so I think there’s something inherently problematic with trying to use modules with Nuxt.

PS. If, instead of importing the script from the dist folder, I do import Emoji from 'quill-emoji', I get:

These dependencies were not found:

* aws-sdk in ./node_modules/fsevents/node_modules/node-pre-gyp/lib/unpublish.js, ./node_modules/fsevents/node_modules/node-pre-gyp/lib/publish.js and 1 other
* child_process in ./node_modules/fsevents/node_modules/detect-libc/lib/detect-libc.js, ./node_modules/fsevents/node_modules/node-pre-gyp/lib/testbinary.js and 9 others
* fs in ./node_modules/cacache/get.js, ./node_modules/chownr/chownr.js and 54 others
* module in (webpack)/lib/node/NodeTargetPlugin.js
* net in ./node_modules/forever-agent/index.js, ./node_modules/fsevents/node_modules/forever-agent/index.js and 4 others
* tls in ./node_modules/forever-agent/index.js, ./node_modules/fsevents/node_modules/forever-agent/index.js and 2 others

To install them, you can run: npm install --save aws-sdk child_process fs module net tls

[aral]

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>

[priteshkadiwala]

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.