Config quill in a nuxt project (VUE component)

Question

I want to delete the toolbar in quill but I cant.

I have the HTML:

<template>
    <quill v-model="content" :config="config"></quill>
</template

And inside script:

<script>
   import VueQuill from 'vue-quill';
   export default {
         data () {
            return {
                config: {
                    readOnly: true,
                    toolbar: false
                }
            }
        }
   }
</script>

Readonly is working, but toolbar is still displaying.

Answer 1

Set config like this

  <script>
       import VueQuill from 'vue-quill';
       export default {
             data () {
                return {
                    config: {
                        readOnly: true,
                        modules: {
                           toolbar: false
                        },
                    }
                }
            }
       }
    </script>

Also to remove toolbar div use CSS since currently there is no direct option available in the package/library you are using

<style scoped>
  .ql-toolbar { display: none; }
</style>