I am facing a strange CSS problem with the vue-quill package. Within my project, I have comments, and each comment has its own quill editor to answer the comment. For debugging purpose, I have changed my isOpen prop to true. This means, by default, below each comment there is one quill editor being displayed.

However, the snow theme CSS is only applied to the first quill editor and all the other editors are not styled at all.

Here is my CommentList.vue compoenent:

<template>
  <div id="comments">
    <p class="font-semibold mb-3">Comments</p>
    <div v-if="comments" v-for="comment in comments">
      <CommentListItem :comment="comment" :key="comment.id" />
    </div>
  </div>
</template>

Here is my CommentListItem.vue component:

<template>
  <div :id="'comment-' + props.comment.id">
    <div>
      {{ props.comment.content }}
    </div>
    <util-quill v-model:is-open="isOpen" :comment-id="props.comment.id"></util-quill>
  </div>
</template>

And here is my UtilQuill.vue compoenent:

<template>
  <div v-if="isOpen" class="quill-editor-wrapper">
    <QuillEditor toolbar="#toolbar" theme="snow">
      <template #toolbar>
        <div id="toolbar">
          <button class="ql-image"></button>
          <button class="ql-link"></button>
        </div>
      </template>
    </QuillEditor>
  </div>
</template>

<script>
import { QuillEditor } from '@vueup/vue-quill'

// CSS styles
import 'quill/dist/quill.snow.css'

export default {
  props: ['isOpen'],
  setup: (props, { emit }) => {
    return { isOpen: props.isOpen };
  },
  components: {
    QuillEditor,
  },
};
</script>

I even tried to import the snow theme in my main.scss file within my Nuxt 3 project but I am still facing the same issue here. Only the first quill editor at the first comment is styled. How can this be?

For debugging purpose, I also got rid of my UtilQuill.vue component and placed the QuillEditor component within the v-for loop of my CommentListItem.vue component. Still, same result.

Also, the snow theme CSS is not working with CSS id’s but rather with CSS classes. Which means, normally, the style should be applied to all my quill editors.

Any idea what to do and how to fix it?

I also have set up a playground to show you the problem. Please take a look at it.

I appricate any kind of help!