{"id":12556,"library":"vue-quilly","title":"Vue Quilly","description":"Vue Quilly is a lightweight Vue 3 component designed to integrate Quill v2, a powerful WYSIWYG rich text editor, into Vue-powered applications. Currently at version 1.1.6, the library sees frequent minor updates, primarily focused on dependency maintenance and minor fixes. Its key differentiators include leveraging `quill/core` to minimize bundle size by avoiding the import of all Quill modules, offering robust TypeScript support, and seamless integration with both Vue 3 and Nuxt 4 projects. It handles content in both HTML and Quill Delta formats, providing a highly customizable base for building bespoke rich text editing experiences while maintaining a small footprint. This component aims to simplify the creation of advanced text editors by abstracting the direct Quill API, allowing developers to focus on application logic while still retaining fine-grained control over the editor's features and appearance.","status":"active","version":"1.1.6","language":"javascript","source_language":"en","source_url":"https://github.com/alekswebnet/vue-quilly","tags":["javascript","quill","quill2","wysiwyg","rich-text","html-editor","vue3","vue","vuejs","typescript"],"install":[{"cmd":"npm install vue-quilly","lang":"bash","label":"npm"},{"cmd":"yarn add vue-quilly","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-quilly","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core WYSIWYG editor library that vue-quilly wraps; explicitly required as a peer dependency.","package":"quill","optional":false}],"imports":[{"note":"This is the primary Vue component for integrating the Quill editor.","symbol":"QuillyEditor","correct":"import { QuillyEditor } from 'vue-quilly'"},{"note":"Quill itself is a default export from its main package.","wrong":"import { Quill } from 'quill'","symbol":"Quill","correct":"import Quill from 'quill'"},{"note":"This import is crucial for applying the default 'snow' theme styles to the Quill editor. Without it, the editor will appear unstyled.","symbol":"'quill/dist/quill.snow.css'","correct":"import 'quill/dist/quill.snow.css'"}],"quickstart":{"code":"<script setup lang=\"ts\">\nimport { ref, onMounted } from 'vue'\nimport { QuillyEditor } from 'vue-quilly'\nimport Quill from 'quill'\nimport 'quill/dist/quill.snow.css'\n\nconst editor = ref<InstanceType<typeof QuillyEditor>>()\nconst content = ref('<p>Hello Quilly!</p>')\nlet quill: Quill | undefined\n\nconst options = {\n  theme: 'snow',\n  modules: {\n    toolbar: [\n      ['bold', 'italic', 'underline'],\n      [{ list: 'ordered' }, { list: 'bullet' }],\n      ['link', 'image']\n    ]\n  }\n}\n\nonMounted(() => {\n  quill = editor.value?.initialize(Quill)\n})\n</script>\n\n<template>\n  <QuillyEditor ref=\"editor\" v-model=\"content\" :options=\"options\" />\n</template>","lang":"typescript","description":"Demonstrates basic setup of QuillyEditor with Quill v2, including component import, content binding, toolbar configuration, and manual initialization."},"warnings":[{"fix":"Run `npm install quill@2` or `yarn add quill@2` or `pnpm add quill@2` in your project.","message":"The `quill` package (specifically version 2) must be installed as a peer dependency alongside `vue-quilly`. Forgetting this will lead to runtime errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add `import 'quill/dist/quill.snow.css'` (or other Quill theme CSS) to your component or global styles.","message":"The Quill editor requires a CSS stylesheet to be imported for proper styling. Without it, the editor will appear unstyled and potentially unusable.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure that `editor.value?.initialize(Quill)` is called, typically within the `onMounted` lifecycle hook, after the component has rendered.","message":"`vue-quilly` requires explicit initialization of the Quill instance via `editor.value?.initialize(Quill)`. Forgetting this step will result in a non-functional editor.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `editor.value` is defined and the component is mounted before calling `initialize`. This is typically done within Vue's `onMounted` hook.","cause":"The `initialize` method is called before the component reference (`editor.value`) is available or before the editor instance is ready.","error":"TypeError: editor.value.initialize is not a function"},{"fix":"Verify that `import { QuillyEditor } from 'vue-quilly'` is present in your script and that `<QuillyEditor>` is used correctly in the template.","cause":"The `QuillyEditor` component was not correctly imported or registered in your Vue application.","error":"[Vue warn]: Failed to resolve component: QuillyEditor"},{"fix":"Add `import 'quill/dist/quill.snow.css'` (or the CSS for your chosen theme) to your component's script section or a global style file.","cause":"Quill's default CSS stylesheet has not been imported, leaving the editor unstyled.","error":"Editor displays without styling / Toolbar looks broken"},{"fix":"Execute `npm install quill@2`, `yarn add quill@2`, or `pnpm add quill@2` in your project's root directory.","cause":"The `quill` package, which is a required peer dependency, is not installed or the installed version is not compatible (must be v2).","error":"Error: Quill is not installed. Please install 'quill@2'"}],"ecosystem":"npm"}