{"id":12555,"library":"vue-quill-editor","title":"Vue Quill Editor","description":"Vue Quill Editor (specifically `surmon-china/vue-quill-editor`) is a rich text editor component designed for Vue 2 applications, acting as a wrapper around the Quill.js editor. The package, currently at version 3.0.6, supports integration in both Single Page Applications (SPA) and Server-Side Rendering (SSR) environments. However, the library is officially deprecated by its maintainer due to the stalled maintenance of the upstream Quill.js project, and critically, it does not support Vue 3. While suitable for existing Vue 2 projects requiring a rich text editor, new development, especially with Vue 3, should consider alternative, actively maintained solutions like 'VueQuill' (a separate Vue 3 specific wrapper in beta) or 'Tiptap'.","status":"deprecated","version":"3.0.6","language":"javascript","source_language":"en","source_url":"https://github.com/surmon-china/vue-quill-editor","tags":["javascript","vue-quill-editor","vue quill","vue text editor","vue rich text editor","vue web editor","vue editor"],"install":[{"cmd":"npm install vue-quill-editor","lang":"bash","label":"npm"},{"cmd":"yarn add vue-quill-editor","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-quill-editor","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core rich text editor dependency; required for editor functionality and styling.","package":"quill","optional":false},{"reason":"Peer dependency as this is a Vue component designed specifically for Vue 2 applications.","package":"vue","optional":false}],"imports":[{"note":"This pattern registers `vue-quill-editor` globally as a plugin in Vue 2 applications using ES Module syntax.","wrong":"const VueQuillEditor = require('vue-quill-editor');\nVue.use(VueQuillEditor);","symbol":"VueQuillEditor (global plugin)","correct":"import Vue from 'vue';\nimport VueQuillEditor from 'vue-quill-editor';\n\nVue.use(VueQuillEditor);"},{"note":"Use a named import for the `quillEditor` component when registering it locally within a Vue component's `components` option.","wrong":"import quillEditor from 'vue-quill-editor';","symbol":"quillEditor (component)","correct":"import { quillEditor } from 'vue-quill-editor';"},{"note":"Essential for the Quill editor to render correctly. At least `quill.core.css` and one theme (e.g., `quill.snow.css`) must be imported.","symbol":"Quill styles","correct":"import 'quill/dist/quill.core.css';\nimport 'quill/dist/quill.snow.css'; // Or 'quill/dist/quill.bubble.css' for bubble theme"},{"note":"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.","wrong":"import VueQuillEditor from 'vue-quill-editor';","symbol":"VueQuillEditor (SSR-specific)","correct":"if (process.browser) {\n const VueQuillEditor = require('vue-quill-editor/dist/ssr');\n Vue.use(VueQuillEditor);\n}"}],"quickstart":{"code":"import Vue from 'vue';\nimport { quillEditor } from 'vue-quill-editor';\n\n// Require Quill styles\nimport 'quill/dist/quill.core.css';\nimport 'quill/dist/quill.snow.css'; // Using the 'snow' theme\n\nnew Vue({\n el: '#app',\n components: {\n quillEditor\n },\n data() {\n return {\n content: '

Hello Vue Quill!

Start editing here.

',\n editorOption: {\n placeholder: 'Compose your rich text...', \n theme: 'snow', // Available themes: 'snow', 'bubble'\n modules: {\n toolbar: [\n ['bold', 'italic', 'underline', 'strike'],\n ['blockquote', 'code-block'],\n [{ 'header': 1 }, { 'header': 2 }],\n [{ 'list': 'ordered'}, { 'list': 'bullet' }],\n [{ 'script': 'sub'}, { 'script': 'super' }],\n [{ 'indent': '-1'}, { 'indent': '+1' }],\n [{ 'direction': 'rtl' }],\n [{ 'size': ['small', false, 'large', 'huge'] }],\n [{ 'header': [1, 2, 3, 4, 5, 6, false] }],\n [{ 'color': [] }, { 'background': [] }],\n [{ 'font': [] }],\n [{ 'align': [] }],\n ['clean']\n ]\n }\n }\n };\n },\n methods: {\n onEditorBlur(quill) {\n console.log('Editor blur!', quill);\n },\n onEditorFocus(quill) {\n console.log('Editor focus!', quill);\n },\n onEditorReady(quill) {\n console.log('Editor ready!', quill);\n },\n onEditorChange({ quill, html, text }) {\n console.log('Editor content changed!', html, text);\n this.content = html;\n }\n },\n template: `\n
\n

Vue Quill Editor Example (Vue 2)

\n \n
\n

Current Editor Content (HTML)

\n 
{{ content }}
\n
\n
\n `\n});","lang":"javascript","description":"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."},"warnings":[{"fix":"For 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.","message":"The `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.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Wrap 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.","message":"When 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.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"For 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).","message":"Directly 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.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"This 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.","message":"Older 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.","severity":"deprecated","affected_versions":"All versions (inherent from Quill.js)"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure 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.","cause":"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.","error":"TypeError: Cannot read properties of undefined (reading 'emit') OR TypeError: Cannot read property 'content' of undefined"},{"fix":"Verify 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.","cause":"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.","error":"Quill:toolbar Container required for toolbar"},{"fix":"Review 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.","cause":"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.","error":"Uncaught SyntaxError: Unexpected token import (or similar module loading errors)"}],"ecosystem":"npm"}