Nuxt registering modules doesn't work

BUG REPORT TEMPLATE

Nuxt v2.12, latest, vue-quill-editor 3.0.6

Reproduction Link

It's a Nuxt issue so I can't reproduce it easily, but seriously, just copy the custom module example from Quill docs, and it won't work

Steps to reproduce

This is my nuxt-quill-plugin.js:

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import Quill from 'quill'
import Counter from './counter'

Quill.register('modules/Counter', Counter);
Vue.use(VueQuillEditor)

This is counter.js:


class Counter {
  constructor(quill, options) {
    console.log("Counter constructor")
    this.quill = quill;
    this.options = options;
    this.container = document.querySelector(options.container);
    console.log("Counter constructor before bind update")

    quill.on('text-change', this.update.bind(this));
    console.log("Counter constructor after bind update")
    this.update();  // Account for initial contents
    console.log("Counter constructor called update")

  }

  calculate() {
    let text = this.quill.getText();
    if (this.options.unit === 'word') {
      text = text.trim();
      // Splitting empty text returns a non-empty array
      return text.length > 0 ? text.split(/\s+/).length : 0;
    } else {
      return text.length;
    }
  }

  update() {
    console.log("update")
    var length = this.calculate();
    var label = this.options.unit;
    if (length !== 1) {
      label += 's';
    }
    this.container.innerText = length + ' ' + label;
  }
}

It is literally the same as the class in the Quill example.

this is my editor.vue component:

<template>
  <section class="container">
    <client-only>
      <quill-editor
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @ready="onEditorReady($event)"
        ref="editor"
        v-model="content"
      />
      <div id="counter">0</div>

    </client-only>
  </section>
</template>

<script>
  export default {
    name: 'editor',
    components:{},
    data() {
      return {
        content: `
         <p>Example text</p>
        `,
        editorOption: {
          // Some Quill options...
          theme: 'snow',
          modules: {
            Counter: true
          }
        }
      }
    },
    methods: {
      onEditorBlur(editor) {
        console.log('editor blur!', editor)
      },
      onEditorFocus(editor) {
        console.log('editor focus!', editor)
      },
      onEditorReady(editor) {
        console.log('editor ready!', editor)
      }
    }
  }
</script>

What is Expected?

The

below the editor should be updated to display word count.

What is actually happening?

I get an error of moduleClass is not a constructor when the page loads.

I tried adding Quill as a Webpack config in nuxt.config.js, but that did not fix the issue.

I honestly have no idea what else to try to make this work, and Google hasn't been much help.

Thanks for any ideas you may have.

surmon-china / vue-quill-editor