Vue Quill Editor

Common errors

• TypeError: Cannot read properties of undefined (reading 'emit') OR TypeError: Cannot read property 'content' of undefined

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

• Quill:toolbar Container required for toolbar

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

• Uncaught SyntaxError: Unexpected token import (or similar module loading errors)

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

Warnings

• breaking 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.
  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.
• gotcha 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.
  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.
• gotcha 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.
  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).
• deprecated 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.
  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.

Install

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

Imports

• VueQuillEditor (global plugin)
  wrong:

  const VueQuillEditor = require('vue-quill-editor');
  Vue.use(VueQuillEditor);

  correct:

  import Vue from 'vue';
  import VueQuillEditor from '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)
  wrong:

  import quillEditor from 'vue-quill-editor';

  correct:

  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)
  wrong:

  import VueQuillEditor from 'vue-quill-editor';

  correct:

  if (process.browser) {
    const VueQuillEditor = require('vue-quill-editor/dist/ssr');
    Vue.use(VueQuillEditor);
  }

  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.

Quickstart

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