0

Here in my Nuxt project I am using vue2-editor and Quill along with quill-image-resize-module. I am able to use the vue-editor but don't know to use the Quill. When I import the Quill it says document is not defined. Here is my code.

<template>
  <div>
    <client-only> <vue-editor class="editor" v-model="arr['desc']"  /></client-only>
  </div>
</template>

<script>
let VueEditor
if (process.client) {
  VueEditor = require('vue2-editor').VueEditor
}
import Quill from "quill"
window.Quill = Quill
const ImageResize = require("quill-image-resize-module").default
Quill.register("modules/imageResize", ImageResize)
export default {
  data() {
    return {
      arr: {},
    }
  },
  components: { VueEditor },
 
}
</script>

My dependencies

"dependencies": {
  "nuxt": "^2.15.7",
  "nuxt-buefy": "^0.4.13",
  "quill": "^1.3.7",
  "quill-image-resize-module": "^3.0.0",
  "vue2-editor": "^2.10.3",
  "vuexfire": "^3.2.5"
},
kissu
  • 24,311
  • 11
  • 36
  • 67
Shubhang Chourasia
  • 111
  • 6
  • Hi, please check [this answer](https://stackoverflow.com/a/69307486/8816585) and tell us if you still have some issues. – kissu Nov 25 '21 at 07:18
  • The error is gone and the console shows the warning of quill overwriting modules. But the resize module is not working. – Shubhang Chourasia Nov 25 '21 at 12:06
  • What does it mean `not working`? Also, this is a free feature or maybe a paid one? (not sure when I saw that but I know that sometimes those are paid features) – kissu Nov 25 '21 at 12:08
  • Its not a paid feature. After adding that module we should be able to resize the image by just double-clicking on image. – Shubhang Chourasia Nov 25 '21 at 12:30
  • I am just dropping it for now. Will see in the future and if I find a solution I will post here. – Shubhang Chourasia Nov 25 '21 at 12:30

0 Answers0