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
  • 40,416
  • 14
  • 65
  • 133
Shubhang Chourasia
  • 153
  • 10
  • 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

1 Answers1

0

You can use vue-quill-editor, it is compatible with nuxt and no need to integrate between vue2-editor and Quill anymore. You can check the installation here: https://www.npmjs.com/package/vue-quill-editor Then add a file config in plugins like this (for example): 

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

Vue.use(VueQuillEditor)
And add it into plugins in nuxt.config.js.
Yuu
  • 1
  • 2