Nuxt 3 + Quill Editor: quill:toolbar Container required for toolbar

Question

Someone, please help me, for more than 3 hours I am stuck with this problem, I tried using Nuxt 3 and quill editor with the customized toolbar, here is the code

html

<client-only>
   <QuillEditor
      theme="snow"
      ref="quill"
      contentType="html"
      :options="editorOption"
      toolbar="#toolbar"
      v-model:content="forms.content"
   />
</client-only>

js

data(){
   return {
     editorOption: {
        theme: "snow",
        placeholder: "Write something...",
        modules: {
          toolbar: "#toolbar"
        },
     },
   }
}

THE ERROR

quill:toolbar Container required for toolbar 

{
    "container": "#toolbar",
    "handlers": {}
}

[Vue warn]: Unhandled error during execution of mounted hook 
  at <QuillEditor theme="snow" ref="quill" contentType="html"

Answer 1

Vue Quill is expecting you to define your custom toolbar. That error happens when you define a custom toolbar selector '#toolbar' but don't actually put the toolbar anywhere (it is looking for an element with an id of "toolbar").

Answer 2

The main reason to this could be due to the fact that when ssr is used, Nuxt tried to render in server-side but it does not exist. Moreover, I am not really sure if quill will support Vite at the moment so I suggest using packages like vue3-quill-editor-vite.