vue-quilly

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

📖 Full Documentation

• Getting Started
• Installation Guide
• Basic Usage
• API Reference
• Examples

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

License

MIT