vue-quilly

Tiny Vue component, that helps to create Quill v2 based WYSIWYG editors in Vue-powered apps.

Features

🚀 Built on top of Quill v2 and Vue 3
📦 Uses quill/core to prevent importing all Quill modules (minimal bundle size)
🔄 Works with both HTML and Quill Delta format
🔷 TypeScript support
⚙️ Highly customizable - build your own editor
⚡ Framework ready - works with Vue 3 and Nuxt 4

Documentation

Quick Start

Installation

npm install vue-quilly quill@2
# or
pnpm add vue-quilly quill@2
# or
yarn add vue-quilly quill@2

Basic Usage

<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>

Live Demo

🎯 Try it live - See various editors built with vue-quilly

Examples

Demo Source Code - Complete examples with different configurations
Nuxt 4 Integration - SSR setup example
Browser CDN Setup - CodePen example

Star History

Support

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

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

License

MIT

alekswebnet/vue-quilly