vue-quilly

Quick Start ​

Install vue-quilly and Quill v2:

npm install vue-quilly quill@2

pnpm add vue-quilly quill@2

yarn add vue-quilly quill@2

Use in your Vue component:

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { QuillyEditor } from 'vue-quilly'
import Quill from 'quill'
import 'quill/dist/quill.snow.css'

const editor = ref<InstanceType<typeof QuillyEditor>>()
const content = ref('<p>Hello Quilly!</p>')
let quill: Quill | undefined

const options = {
  theme: 'snow',
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      ['link', 'image']
    ]
  }
}

onMounted(() => {
  quill = editor.value?.initialize(Quill)
})
</script>

<template>
  <QuillyEditor ref="editor" v-model="content" :options="options" />
</template>

Why vue-quilly? ​

vue-quilly is designed to be a flexible foundation for building custom Quill editors in Vue applications:

• Customizable - Requires Quill configuration, giving you full control over features.
• Minimal footprint - Import only the Quill modules you need to keep bundle size small
• Flexible formats - Work with HTML or Delta format, or use both for maximum flexibility
• Full control - Access the Quill instance directly for advanced customization and features

Examples ​

Check out live examples and learn from real implementations:

• 🚀 Live Demo - See various editors built with vue-quilly
• 📚 Demo Source Code - Complete examples with source code
• ⚡ Nuxt 4 Example - SSR integration guide

Support the Project ​

If you find vue-quilly useful and want to support its development:

❤️ Your support helps with maintenance, bug fixes, and long-term improvements.