Vue Quill Component

1.5.1 · active · verified Tue Apr 21

vue-quill is a Vue component that wraps the Quill rich text editor, providing an easy way to integrate Quill into Vue applications. As of version 1.5.1, it offers straightforward v-model binding for content (defaulting to Quill's Delta format, with an option for raw HTML output), configurable editor options, custom formats, and keybindings. While no explicit release cadence is stated, recent updates (v1.4.0, v1.1.0) suggest active maintenance, primarily supporting Vue 2. Key differentiators include its simplicity as a direct wrapper, direct event emission for content updates, and explicit guidance for Vue 1 compatibility via older versions. Developers must manually include Quill's CSS for correct styling.

Common errors

```
Error in render: 'quill' is not defined
```
cause The VueQuill plugin was not installed globally using `Vue.use(VueQuill)`, or the component name was mistyped.

fix Ensure `import VueQuill from 'vue-quill'; Vue.use(VueQuill);` is called before your Vue app is instantiated, and use `<quill>` as the tag name in your template.
```
Cannot read properties of undefined (reading 'editor')
```
cause This often occurs when trying to access Quill editor methods (e.g., `this.$refs.quill.editor.getContents()`) before the editor component has fully mounted or when the `$refs` object is not yet available.

fix Ensure your component is mounted, and you are accessing the editor instance correctly. If accessing via `$refs`, use `this.$refs.quill.$emit('set-html', '...')` for updates from parent, or wait for component's `mounted` lifecycle hook if manipulating internally. The `editor` property might not be directly exposed or might not be ready immediately.
```
The Quill editor appears unstyled or with incorrect theme.
```
cause The Quill CSS stylesheet is missing or incorrectly linked in your project.

fix Add `<link href="https://cdn.quilljs.com/1.2.6/quill.snow.css" rel="stylesheet">` (or similar for 'bubble' theme/local path) to your HTML file, usually in the `<head>` section.

Warnings

breaking As of v1.4.0, the toolbar configuration provided via the `editorConfig` prop is no longer merged with Quill's default toolbar. Your custom toolbar array will now *replace* the default configuration entirely. This change was introduced to simplify the removal of default toolbar elements.
Fix: Review your `editorConfig.modules.toolbar` array. If you relied on merging, you must now explicitly define all desired toolbar elements. For example, to only have bold and lists, explicitly list them: `toolbar: [['bold'], [{ 'list': 'ordered' }, { 'list': 'bullet' }]]`.
gotcha vue-quill requires the Quill.js CSS stylesheet to be included manually in your project for the editor to render correctly with themes like 'snow' or 'bubble'. Without it, the editor will appear unstyled and potentially non-functional.
Fix: Ensure you add the Quill CSS link to your HTML, typically in the `<head>` section, for example: `<link href="https://cdn.quilljs.com/1.2.6/quill.snow.css" rel="stylesheet">` (adjust version as needed).
gotcha This library is primarily designed for Vue 2. If you are using Vue 1, you must use v0.1.5 or an earlier version of vue-quill, as later versions introduced breaking changes and features incompatible with Vue 1.
Fix: For Vue 1 projects, downgrade `vue-quill` to `0.1.5` or an earlier compatible version. For Vue 3, this library is not officially supported and may require alternative wrappers or custom integration.
gotcha The `v-model` binding for the `<quill>` component defaults to Quill's Delta object format. If you expect or require plain HTML content, you must explicitly set the `output` prop to `'html'`. Failing to do so will result in your `v-model` bound variable containing a complex Delta object.
Fix: Add the `output="html"` prop to your `<quill>` component: `<quill v-model="content" output="html"></quill>`.

Install

npm install vue-quill npm
yarn add vue-quill yarn
pnpm add vue-quill pnpm

Imports

VueQuill
wrong:
```
const VueQuill = require('vue-quill');
```
correct:
```
import VueQuill from 'vue-quill';
```
CommonJS `require` is generally not recommended for modern Vue projects. `VueQuill` is the plugin that registers the `<quill>` component globally via `Vue.use()`.

<quill>

wrong:

<template><VueQuill v-model="content"></VueQuill></template>

correct:

<template><quill v-model="content"></quill></template>

After `Vue.use(VueQuill)`, the component is globally registered as `<quill>`, not `VueQuill`.

set-html / set-content
wrong:
```
this.$refs.quill.setHtml('<h1>New Content</h1>');
```
correct:
```
this.$refs.quill.$emit('set-html', '<h1>New Content</h1>');
```
Content updates from the parent component are done by emitting specific events on the component's instance using `$emit`.

Quickstart

This quickstart demonstrates how to install vue-quill, register its component, and use it with v-model. It initializes content as a Delta object, applies a custom configuration, outputs content as HTML, and shows event handling. Crucially, it includes the necessary Quill CSS link.

import Vue from 'vue';
import VueQuill from 'vue-quill';

// Install the plugin to register the <quill> component globally
Vue.use(VueQuill);

// Mount a Vue app (example for Vue 2)
new Vue({
  el: '#app',
  data() {
    return {
      // Initialize content as a valid Delta object for best practice
      content: {
        ops: [
          { insert: 'Hello ' },
          { insert: 'Vue-Quill', attributes: { bold: true } },
          { insert: '\nThis is an example.' }
        ]
      },
      editorConfig: {
        placeholder: 'Start composing your epic...', 
        theme: 'snow',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            ['link']
          ]
        }
      }
    };
  },
  template: `
    <div>
      <link href="https://cdn.quilljs.com/1.2.6/quill.snow.css" rel="stylesheet">
      <p>Edit the content below:</p>
      <quill v-model="content" :config="editorConfig" @selection-change="handleSelectionChange" output="html"></quill>
      <p>HTML Output:</p>
      <div style="border: 1px solid #ccc; padding: 10px; min-height: 100px;">{{ content }}</div>
    </div>
  `,
  methods: {
    handleSelectionChange(editor, range) {
      if (range) {
        console.log('Selection changed:', editor.getText(range.index, range.length));
      }
    }
  }
});

view raw JSON →