vue-quill

library1.5.1jsnpmunverified

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.

web-framework

npm install vue-quill

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-QUILL

vue-quill

web-frameworkjavascriptv1.5.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueQuill

✓ import VueQuill from 'vue-quill';

✗ const VueQuill = require('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>

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

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

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

set-html / set-content

✓ this.$refs.quill.$emit('set-html', '<h1>New Content</h1>');

✗ this.$refs.quill.setHtml('<h1>New Content</h1>');

Content updates from the parent component are done by emitting specific events on the component's instance using `$emit`.

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)); } } } });

Debug

Known issues

breakingAs 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' }]]`.

affects: >=1.4.0

gotchavue-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).

affects: >=0.1.0

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

affects: >0.1.5

gotchaThe `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>`.

affects: >=0.1.0

Errors

Common errors & fixes

Error in render: 'quill' is not defined

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

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.

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.

Upgrade

Version history

1.5.1latest on npm

Audit

Dependencies

quillrequiredvue-quill is a wrapper component for the Quill editor and requires Quill to be installed and its CSS included separately for full functionality and styling.

Agent activity

10 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/CroudSupport/vue-quill ↗

packagehttps://www.npmjs.com/package/vue-quill ↗