Vue Quill css is only applied to my first Quill Editor component

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!

>Solution :

The theme looks to work well as far as I see. Not sure if it should not rather be import '@vueup/vue-quill/dist/vue-quill.snow.css';, looks pretty similar to the theme shown here.

As for the main issue, it seems that the plugins target only #toolbar, the issue is that HTML can have only 1 unique id per page. A possible solution would be to have something with an offset id on each iteration.

This looks to work fine.

util-quil.vue

<script setup>
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';

const props = defineProps(['value']);
</script>

<template>
  <div>Value index >> {{ props.value }}</div>
  <div class="quill-editor-wrapper">
    <QuillEditor :toolbar="`toolbar${props.value}`" theme="snow">
      <template #[`toolbar${props.value}`]>
        <div :toolbar="`#toolbar${props.value}`">
          <button class="ql-image"></button>
          <button class="ql-link"></button>
        </div>
      </template>
    </QuillEditor>
  </div>
</template>

app.vue

<template>
  <div v-for="n in 10">
    <p>I am the random comment text...</p>
    <util-quill :value="n" />
  </div>
</template>

Updated repro working link.

I am not sure if it’s the perfect solution (I do not have any experience at all with Quill) but it looks like it’s quite functional overall.