Quill.vue

<template>
  <div class="quill-editor">
    <!-- Create toolbar container -->
    <div id="toolbar" ref="toolbar" @click.prevent>
      <select class="ql-size">
        <option value="small"></option>
        <option selected></option>
        <option value="large"></option>
        <option value="huge"></option>
      </select>

      <button class="ql-bold"></button>
      <button class="ql-italic"></button>

      <select class="ql-align">
        <option selected=""></option>
        <option value="center"></option>
        <option value="right"></option>
      </select>

      <select class="ql-color"></select>
      <!-- <select class="ql-background"></select> -->
      <button class="ql-list" value="ordered"></button>
      <button class="ql-list" value="bullet"></button>
      <button class="ql-clean"></button>
    </div>
    <div id="editor" ref="editor" class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  require('quill/assets/core.styl')
  require('quill/assets/snow.styl')
  import Quill from 'quill'

  export default {
    name: 'QuillWrapper',
    mounted () {
      this._editor = new Quill(this.$refs.editor, {
        theme: 'snow',
        modules: { toolbar: this.$refs.toolbar }
      })
    },

    methods: {
      pasteHtml (value) {
        this._editor.setText('')
        this._editor.clipboard.dangerouslyPasteHTML(0, value)
      },
      value () {
        return this._editor.root.innerHTML
      }
    }
  }

</script>

<style lang="sass?indentedSyntax">
  @import ~assets/sass/variables

  .quill-editor
    #toolbar
      border-radius: 3px 3px 0 0
    #editor
      border-radius: 0 0 3px 3px
    &.is-danger
      #toolbar
        border-bottom-color: $danger
      #editor
        border-color: $danger
</style>