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
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
VueQuillEditor (global plugin)
✓ import Vue from 'vue';
import VueQuillEditor from 'vue-quill-editor';
Vue.use(VueQuillEditor);
✗ const VueQuillEditor = require('vue-quill-editor');
Vue.use(VueQuillEditor);
This pattern registers `vue-quill-editor` globally as a plugin in Vue 2 applications using ES Module syntax.
quillEditor (component)
✓ import { quillEditor } from 'vue-quill-editor';
✗ import quillEditor from 'vue-quill-editor';
Use a named import for the `quillEditor` component when registering it locally within a Vue component's `components` option.
Quill styles
✓ import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css'; // Or 'quill/dist/quill.bubble.css' for bubble theme
Essential for the Quill editor to render correctly. At least `quill.core.css` and one theme (e.g., `quill.snow.css`) must be imported.
VueQuillEditor (SSR-specific)
✓ if (process.browser) {
const VueQuillEditor = require('vue-quill-editor/dist/ssr');
Vue.use(VueQuillEditor);
}
✗ import VueQuillEditor from 'vue-quill-editor';
For Server-Side Rendering (SSR) environments like Nuxt.js, the component must be conditionally `require`d in the browser context to prevent build issues on the server.
This quickstart demonstrates how to integrate `vue-quill-editor` into a Vue 2 application using local component registration. It shows how to bind content using `v-model`, customize editor options (including theme and a comprehensive toolbar), and handle key lifecycle and content change events. The editor's HTML output is displayed live below the component.
import Vue from 'vue';
import { quillEditor } from 'vue-quill-editor';
// Require Quill styles
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css'; // Using the 'snow' theme
new Vue({
el: '#app',
components: {
quillEditor
},
data() {
return {
content: '<h2>Hello Vue Quill!</h2><p>Start editing here.</p>',
editorOption: {
placeholder: 'Compose your rich text...',
theme: 'snow', // Available themes: 'snow', 'bubble'
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['clean']
]
}
}
};
},
methods: {
onEditorBlur(quill) {
console.log('Editor blur!', quill);
},
onEditorFocus(quill) {
console.log('Editor focus!', quill);
},
onEditorReady(quill) {
console.log('Editor ready!', quill);
},
onEditorChange({ quill, html, text }) {
console.log('Editor content changed!', html, text);
this.content = html;
}
},
template: `
<div id="app" style="font-family: Arial, sans-serif; max-width: 800px; margin: 20px auto;">
<h1>Vue Quill Editor Example (Vue 2)</h1>
<quill-editor
v-model="content"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
@change="onEditorChange($event)"
/>
<div style="margin-top: 30px; padding: 15px; border: 1px solid #eee; background: #f9f9f9;">
<h3>Current Editor Content (HTML)</h3>
<pre style="white-space: pre-wrap; word-break: break-all; background: #fff; padding: 10px; border: 1px solid #ddd;">{{ content }}</pre>
</div>
</div>
`
});
Debug
Known issues
breakingThe `vue-quill-editor` library is officially deprecated by its maintainer and explicitly does not support Vue 3. Using this package in a Vue 3 project will lead to compatibility issues, errors, and an unmaintained codebase. The underlying Quill.js project itself has also seen stalled maintenance since version 1.3.x.fixFor new Vue 3 projects, it is strongly recommended to use modern, actively maintained rich text editor components like 'Tiptap' or the separate 'VueQuill' (currently in beta for Vue 3). For existing Vue 2 projects, be aware that no further development or bug fixes are expected.
affects: >=3.0.0
gotchaWhen implementing `vue-quill-editor` in Server-Side Rendering (SSR) environments (e.g., Nuxt.js), the component must be dynamically `require`d and conditionally initialized only in the browser context. Direct ESM `import` statements for `vue-quill-editor` will cause build failures during server-side compilation.fixWrap the `require('vue-quill-editor/dist/ssr')` statement and the `Vue.use()` or component registration call within an `if (process.browser)` check to ensure it executes only on the client side. affects: >=3.0.0
gotchaDirectly updating the `v-model` bound data property for the editor's content might not always reflect visually in the Quill editor, especially when the update is programmatic rather than user-initiated. This can be particularly noticeable with older Quill versions or specific scenarios.fixFor programmatic updates, it's often more reliable to access the underlying Quill instance via `$refs.myQuillEditor.quill` (where `myQuillEditor` is your `ref` name) and use Quill's native API methods like `setContents()` (for Delta objects) or `setHtml()` (for HTML strings) after the editor is fully ready (e.g., in an `@ready` event handler).
affects: >=3.0.0
deprecatedOlder versions of Quill.js, upon which `vue-quill-editor` is built, may trigger browser console warnings regarding the deprecation of synchronous 'DOMNodeInserted' DOM Mutation Events. These warnings indicate potential performance issues and a risk of future incompatibility with browser changes.fixThis issue is inherent to the Quill.js core and not directly resolvable within `vue-quill-editor`. While upgrading `vue-quill-editor` might indirectly update Quill.js to a version with fewer such warnings, the fundamental deprecation of `vue-quill-editor` and Quill.js means a long-term solution involves migrating to a more modern and actively maintained rich text editor library.
affects: All versions (inherent from Quill.js)
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'emit') OR TypeError: Cannot read property 'content' of undefined
This error typically occurs when attempting to interact with the Quill editor instance or its properties before the `quillEditor` component has fully initialized, or if `v-model` is misconfigured or accessing a non-existent data property.
fixEnsure the editor component is properly mounted and visible. If accessing the Quill instance directly, use the `@ready` event to guarantee the instance is available. For `v-model`, confirm the bound data property is defined and initialized correctly in your Vue component's `data` option.
Quill:toolbar Container required for toolbar
The Quill editor's toolbar module expects a specific HTML container element to exist in the DOM where it can render the toolbar buttons. This error indicates that the required container is either missing, has an incorrect ID/class, or the configuration pointing to it is wrong.
fixVerify that your `quill-editor` component's options include a `toolbar` configuration. If using a custom toolbar, ensure the HTML structure for the toolbar is present in your template and correctly linked via `container` in Quill's toolbar options. The default `snow` and `bubble` themes usually provide this automatically, so ensure theme CSS is also imported.
Uncaught SyntaxError: Unexpected token import (or similar module loading errors)
This error frequently arises in environments with mixed CommonJS and ES Module usage, or when a build tool (like Webpack) is not correctly configured to transpile or handle module syntax, especially in older Node.js versions, Electron applications, or specific SSR setups.
fixReview your project's build configuration (e.g., `webpack.config.js`, Babel presets). If in an SSR context, strictly adhere to the conditional `require('vue-quill-editor/dist/ssr')` pattern. For Electron or similar desktop applications, ensure your Webpack setup transpiles `node_modules` if necessary, and that your Node.js environment supports the module syntax being used. Audit
Dependencies
quillrequiredCore rich text editor dependency; required for editor functionality and styling.
vuerequiredPeer dependency as this is a Vue component designed specifically for Vue 2 applications.