CODEWITHSUNDEEP
vue.jsquillwysihtml5nuxt.js
hyeokluv
hyeokluv

Reputation: 397

I want quilljs in nuxt.js (vue.js)

I know vue-quill-editor.

However, I am having difficulties.

First, I started with 

vue vue-init nuxt / express myProject

and 

npm install --save vue-quill-editor

~plugins/quill.js

import Vue from 'vue'

if (process.BROWSER_BUILD) {
  require('quill/dist/quill.snow.css')
  require('quill/dist/quill.bubble.css')
  require('quill/dist/quill.core.css')
  Vue.use(require('vue-quill-editor/ssr'))
}

nuxt.config.js

plugins: [
  { src: '~plugins/quill.js' }
]

Is this the right way?

How do I add modules here? For example,

Import {ImageImport} from '../modules/ImageImport.js'
Import {ImageResize} from '../modules/ImageResize.js'
Quill.register ('modules / imageImport', ImageImport)
Quill.register ('modules / imageResize', ImageResize)

I could refer to the following,

but it does not seem to be an example of a nuxt.js environment. So I failed.

https://github.com/surmon-china/vue-quill-editor/tree/master/examples

Thank you for your help.

Upvotes: 2

Views: 8584

Answers (3)

Ahad
Ahad

Reputation: 119

quills is for vue2 and vue3. if you are using nuxtjs that use vue2 you have to use this enter link description here

if you are using vuejs 3 you can use this enter link description here

Upvotes: 0

KitKit
KitKit

Reputation: 9533

You should take a look this package: Vue Quill Editor. This package has example for NuxtJS in here. I've been successful with this.

Upvotes: 5

Nicolas Pennec
Nicolas Pennec

Reputation: 7631

The best pratice is to use the ssr: false option in plugins to run the file only on the client-side.

nuxt.config.js

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

Check the Nuxt doc: https://nuxtjs.org/guide/plugins#client-side-only

Upvotes: 1

Related Questions