Vue Quilly

1.1.6 · active · verified Sun Apr 19

Vue Quilly is a lightweight Vue 3 component designed to integrate Quill v2, a powerful WYSIWYG rich text editor, into Vue-powered applications. Currently at version 1.1.6, the library sees frequent minor updates, primarily focused on dependency maintenance and minor fixes. Its key differentiators include leveraging `quill/core` to minimize bundle size by avoiding the import of all Quill modules, offering robust TypeScript support, and seamless integration with both Vue 3 and Nuxt 4 projects. It handles content in both HTML and Quill Delta formats, providing a highly customizable base for building bespoke rich text editing experiences while maintaining a small footprint. This component aims to simplify the creation of advanced text editors by abstracting the direct Quill API, allowing developers to focus on application logic while still retaining fine-grained control over the editor's features and appearance.

Common errors

```
TypeError: editor.value.initialize is not a function
```
cause The `initialize` method is called before the component reference (`editor.value`) is available or before the editor instance is ready.

fix Ensure `editor.value` is defined and the component is mounted before calling `initialize`. This is typically done within Vue's `onMounted` hook.
```
[Vue warn]: Failed to resolve component: QuillyEditor
```
cause The `QuillyEditor` component was not correctly imported or registered in your Vue application.

fix Verify that `import { QuillyEditor } from 'vue-quilly'` is present in your script and that `<QuillyEditor>` is used correctly in the template.
```
Editor displays without styling / Toolbar looks broken
```
cause Quill's default CSS stylesheet has not been imported, leaving the editor unstyled.

fix Add `import 'quill/dist/quill.snow.css'` (or the CSS for your chosen theme) to your component's script section or a global style file.
```
Error: Quill is not installed. Please install 'quill@2'
```
cause The `quill` package, which is a required peer dependency, is not installed or the installed version is not compatible (must be v2).

fix Execute `npm install quill@2`, `yarn add quill@2`, or `pnpm add quill@2` in your project's root directory.

Warnings

gotcha The `quill` package (specifically version 2) must be installed as a peer dependency alongside `vue-quilly`. Forgetting this will lead to runtime errors.
Fix: Run `npm install quill@2` or `yarn add quill@2` or `pnpm add quill@2` in your project.
gotcha The Quill editor requires a CSS stylesheet to be imported for proper styling. Without it, the editor will appear unstyled and potentially unusable.
Fix: Add `import 'quill/dist/quill.snow.css'` (or other Quill theme CSS) to your component or global styles.
gotcha `vue-quilly` requires explicit initialization of the Quill instance via `editor.value?.initialize(Quill)`. Forgetting this step will result in a non-functional editor.
Fix: Ensure that `editor.value?.initialize(Quill)` is called, typically within the `onMounted` lifecycle hook, after the component has rendered.

Install

npm install vue-quilly npm
yarn add vue-quilly yarn
pnpm add vue-quilly pnpm

Imports

QuillyEditor
```
import { QuillyEditor } from 'vue-quilly'
```
This is the primary Vue component for integrating the Quill editor.
Quill
wrong:
```
import { Quill } from 'quill'
```
correct:
```
import Quill from 'quill'
```
Quill itself is a default export from its main package.
'quill/dist/quill.snow.css'
```
import 'quill/dist/quill.snow.css'
```
This import is crucial for applying the default 'snow' theme styles to the Quill editor. Without it, the editor will appear unstyled.

Quickstart

Demonstrates basic setup of QuillyEditor with Quill v2, including component import, content binding, toolbar configuration, and manual initialization.

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

view raw JSON →