vue-quill - GitLite

KO | EN

gitlite — search

#hacktoberfest #react #ai #llm #golang #go #rust #macos #nodejs #awesome #cli #vue #mcp #openai

vue-quill

(★ 1,345)

Rich Text Editor Component for Vue 3.

File Explorer

Download Latest Version (.zip)

- - bug_report.md
- - ci.yml
  - deploy-docs.yml
  - release-vue-quill.yml
- dependabot.yml
- FUNDING.yml
- stale.yml
- commit-msg
- pre-commit
- launch.json
- settings.json
- - TextReplacer.vue
- - index.md
- - github-api.ts
  - load-scripts.ts
  - regex.ts
- package-lock.json
- package.json
- postcss.config.js
- - .gitignore
  - nuxt.config.ts
  - package-lock.json
  - package.json
  - README.md
  - tsconfig.json
- - .gitignore
  - index.html
  - index.ssr.html
  - package-lock.json
  - package.json
  - README.md
  - server.mjs
  - tsconfig.app.json
  - tsconfig.json
  - tsconfig.node.json
  - vite.config.ts
- - package.json
  - README.md
  - tsconfig.json
- - package-lock.json
  - package.json
  - README.md
- - api-extractor.json
  - assets.config.json
  - index.js
  - package-lock.json
  - package.json
  - README.md
- bootstrap.ts
- build.ts
- buildAssets.ts
- chalk.js
- dev.ts
- devAssets.ts
- logger.ts
- release.ts
- setupJestEnv.ts
- utils.ts
- verifyCommit.ts
- verifyRelease.ts
.gitignore
.prettierrc
api-extractor.json
CHANGELOG.md
CODE_OF_CONDUCT.md
eslint.config.mjs
LICENSE
package-lock.json
package.json
README.md
rollup.config.js
tsconfig.json

# Installation Guide

1. Get the code

git clone https://github.com/vueup/vue-quill

Downloads the entire project code from GitHub to your computer.

cd vue-quill

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install @vueup/vue-quill@latest

Downloads and installs the libraries listed in package.json.

yarn add @vueup/vue-quill@latest

Type this command into your terminal and run it.

pnpm add @vueup/vue-quill@latest

Type this command into your terminal and run it.

<img alt="npm (tag)" src="https://img.shields.io/npm/v/@vueup/vue-quill">

Type this command into your terminal and run it.

<img src="https://img.shields.io/npm/l/@vueup/vue-quill" alt="License">

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="center">
  <a href="https://vueup.github.io/vue-quill/" target="_blank" rel="noopener noreferrer">
    <img height="120" src="https://vueup.github.io/vue-quill/quill.svg" alt="Vue + Quill logo">
  </a>
</p>
<h1 align="center">VueQuill</h1>
<h3 align="center">
  Rich Text Editor Component for Vue 3.
</h3>
<p align="center">
  <a href="https://www.npmjs.com/package/@vueup/vue-quill" title="Version" target="_blank" rel="noopener noreferrer">
    <img alt="npm (tag)" src="https://img.shields.io/npm/v/@vueup/vue-quill">
  </a>
  <a href="https://www.npmjs.com/package/@vueup/vue-quill" title="License" target="_blank" rel="noopener noreferrer">
    <img src="https://img.shields.io/npm/l/@vueup/vue-quill" alt="License">
  </a>
  <a href="https://github.com/vueup/vue-quill/actions" title="Checks" target="_blank" rel="noopener noreferrer">
    <img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/vueup/vue-quill/release-vue-quill.yml?branch=master&logo=github">
  </a>
  <a href="https://github.com/vueup/vue-quill" title="Last commit" target="_blank" rel="noopener noreferrer">
    <img src="https://img.shields.io/github/last-commit/vueup/vue-quill?logo=github" alt="Last commit">
  </a>
  <a href="https://github.com/vueup/vue-quill" title="Github Repo Stars" target="_blank" rel="noopener noreferrer">
    <img src="https://img.shields.io/github/stars/vueup/vue-quill?style=social" alt="Github Repo Stars">
  </a>
</p>
<p align="center">
  <a href="https://vueup.github.io/vue-quill/#demo" title="VueQuill Demo" target="_blank" rel="noopener noreferrer">
    <img src="https://user-images.githubusercontent.com/6185447/111898684-33761b00-8a5a-11eb-9458-372c0185f576.png" alt="VueQuill Editor">
  </a>
  <br>
  <a href="https://vueup.github.io/vue-quill/#demo" title="Live Demo" target="_blank" rel="noopener noreferrer">👀 See a Live Demo</a>
</p>

## 🔎 Overview

**VueQuill** is a Vue 3 component for building rich text editors with [Quill](https://quilljs.com/).

- 💚 **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:

```bash
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:

```vue
<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](https://vueup.github.io/vue-quill/guide/)**
  - [🚀 Introduction](https://vueup.github.io/vue-quill/guide/)
  - [⚙️ Installation](https://vueup.github.io/vue-quill/guide/installation.html)
  - [💡 Usage](https://vueup.github.io/vue-quill/guide/usage.html)
  - [🎨 Themes](https://vueup.github.io/vue-quill/guide/themes.html)
  - [🚥 Toolbar](https://vueup.github.io/vue-quill/guide/toolbar.html)
  - [📦 Modules](https://vueup.github.io/vue-quill/guide/modules.html)
  - [🛠️ Options](https://vueup.github.io/vue-quill/guide/options.html)
  - [🖥️ Server-Side Rendering](https://vueup.github.io/vue-quill/guide/ssr.html)
- **[🧰 APIs](https://vueup.github.io/vue-quill/api/)**
  - [📌 Props](https://vueup.github.io/vue-quill/api/)
  - [⚡ Events](https://vueup.github.io/vue-quill/api/events.html)
  - [📢 Methods](https://vueup.github.io/vue-quill/api/methods.html)
  - [🔌 Slots](https://vueup.github.io/vue-quill/api/slots.html)
  - [↗️ Export](https://vueup.github.io/vue-quill/api/export.html)

## 👏 Contributing

Pull requests are welcome. For major changes, please create a [new discussion](https://github.com/vueup/vue-quill/discussions) first about what you would like to change.

## 📝 License

[MIT](https://choosealicense.com/licenses/mit/)