{"id":15915,"library":"vue-quill","title":"Vue Quill Component","description":"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.","status":"active","version":"1.5.1","language":"javascript","source_language":"en","source_url":"https://github.com/CroudSupport/vue-quill","tags":["javascript","vue","quill","js","plugin","text","editor"],"install":[{"cmd":"npm install vue-quill","lang":"bash","label":"npm"},{"cmd":"yarn add vue-quill","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-quill","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"vue-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.","package":"quill","optional":false}],"imports":[{"note":"CommonJS `require` is generally not recommended for modern Vue projects. `VueQuill` is the plugin that registers the `` component globally via `Vue.use()`.","wrong":"const VueQuill = require('vue-quill');","symbol":"VueQuill","correct":"import VueQuill from 'vue-quill';"},{"note":"After `Vue.use(VueQuill)`, the component is globally registered as ``, not `VueQuill`.","wrong":"","symbol":"","correct":""},{"note":"Content updates from the parent component are done by emitting specific events on the component's instance using `$emit`.","wrong":"this.$refs.quill.setHtml('

New Content

');","symbol":"set-html / set-content","correct":"this.$refs.quill.$emit('set-html', '

New Content

');"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueQuill from 'vue-quill';\n\n// Install the plugin to register the component globally\nVue.use(VueQuill);\n\n// Mount a Vue app (example for Vue 2)\nnew Vue({\n el: '#app',\n data() {\n return {\n // Initialize content as a valid Delta object for best practice\n content: {\n ops: [\n { insert: 'Hello ' },\n { insert: 'Vue-Quill', attributes: { bold: true } },\n { insert: '\\nThis is an example.' }\n ]\n },\n editorConfig: {\n placeholder: 'Start composing your epic...', \n theme: 'snow',\n modules: {\n toolbar: [\n ['bold', 'italic', 'underline', 'strike'],\n [{ 'list': 'ordered' }, { 'list': 'bullet' }],\n ['link']\n ]\n }\n }\n };\n },\n template: `\n
\n \n

Edit the content below:

\n \n

HTML Output:

\n
{{ content }}
\n
\n `,\n methods: {\n handleSelectionChange(editor, range) {\n if (range) {\n console.log('Selection changed:', editor.getText(range.index, range.length));\n }\n }\n }\n});","lang":"javascript","description":"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."},"warnings":[{"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' }]]`.","message":"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.","severity":"breaking","affected_versions":">=1.4.0"},{"fix":"Ensure you add the Quill CSS link to your HTML, typically in the `` section, for example: `` (adjust version as needed).","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">0.1.5"},{"fix":"Add the `output=\"html\"` prop to your `` component: ``.","message":"The `v-model` binding for the `` 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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure `import VueQuill from 'vue-quill'; Vue.use(VueQuill);` is called before your Vue app is instantiated, and use `` as the tag name in your template.","cause":"The VueQuill plugin was not installed globally using `Vue.use(VueQuill)`, or the component name was mistyped.","error":"Error in render: 'quill' is not defined"},{"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.","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.","error":"Cannot read properties of undefined (reading 'editor')"},{"fix":"Add `` (or similar for 'bubble' theme/local path) to your HTML file, usually in the `` section.","cause":"The Quill CSS stylesheet is missing or incorrectly linked in your project.","error":"The Quill editor appears unstyled or with incorrect theme."}],"ecosystem":"npm"}