VueQuill

Rich Text Editor Component for Vue 3.

👀 See a Live Demo

🔎 Overview

VueQuill is a Vue 3 component for building rich text editors with Quill.

• 💚 Built With Vue 3: More powerful and performant framework than ever before.
• 🧙‍♂️ Fully TypeScript: VueQuill source code is written entirely in TypeScript.
• 🛠️ Easy To Use: Straightforward implementation through a simple API.
• 📦 Quill 2 Ready: Includes Quill 2 as a dependency and exposes the underlying Quill instance when you need it.
• 🖥️ SSR Friendly: Can be imported in Vue SSR applications and initializes Quill in the browser.

🚀 Quick Start

Install VueQuill with your package manager:

npm install @vueup/vue-quill@latest
# or
yarn add @vueup/vue-quill@latest
# or
pnpm add @vueup/vue-quill@latest

Use the component in a Vue single-file component and import the theme stylesheet you want:

<script setup>
import { ref } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

const content = ref('<p>Hello VueQuill!</p>')
</script>

<template>
  <QuillEditor
    v-model:content="content"
    content-type="html"
    theme="snow"
    toolbar="minimal"
  />
</template>

That is enough for a basic editor. Remember to import a theme stylesheet (snow or bubble) and set content-type when binding HTML or plain text content.

📚 Documentation

• 📘 Guide
  • 🚀 Introduction
  • ⚙️ Installation
  • 💡 Usage
  • 🎨 Themes
  • 🚥 Toolbar
  • 📦 Modules
  • 🛠️ Options
  • 🖥️ Server-Side Rendering
• 🧰 APIs
  • 📌 Props
  • ⚡ Events
  • 📢 Methods
  • 🔌 Slots
  • ↗️ Export

👏 Contributing

Pull requests are welcome. For major changes, please create a new discussion first about what you would like to change.

📝 License

MIT