Registry / web-framework / vue-quilly

vue-quilly

JSON →
library1.1.6jsnpmunverified

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.

web-framework
npm install vue-quilly
github ↗package ↗homepage ↗
INSTALL
IMPORT
SIG · VUE-QUILLY
V
vue-quilly
web-frameworkjavascriptv1.1.6
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
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
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

QuillyEditor
✓ import { QuillyEditor } from 'vue-quilly'
This is the primary Vue component for integrating the Quill editor.
Quill
✓ import Quill from 'quill'
✗ import { Quill } from 'quill'
Quill itself is a default export from its main package.
'quill/dist/quill.snow.css'
✓ import 'quill/dist/quill.snow.css'
This import is crucial for applying the default 'snow' theme styles to the Quill editor. Without it, the editor will appear unstyled.

Demonstrates basic setup of QuillyEditor with Quill v2, including component import, content binding, toolbar configuration, and manual initialization.

<script setup lang="ts"> import { ref, onMounted } from 'vue' import { QuillyEditor } from 'vue-quilly' import Quill from 'quill' import 'quill/dist/quill.snow.css' const editor = ref<InstanceType<typeof QuillyEditor>>() const content = ref('<p>Hello Quilly!</p>') let quill: Quill | undefined const options = { theme: 'snow', modules: { toolbar: [ ['bold', 'italic', 'underline'], [{ list: 'ordered' }, { list: 'bullet' }], ['link', 'image'] ] } } onMounted(() => { quill = editor.value?.initialize(Quill) }) </script> <template> <QuillyEditor ref="editor" v-model="content" :options="options" /> </template>
Debug
Known issues
gotchaThe `quill` package (specifically version 2) must be installed as a peer dependency alongside `vue-quilly`. Forgetting this will lead to runtime errors.
fix
Run `npm install quill@2` or `yarn add quill@2` or `pnpm add quill@2` in your project.
affects: >=1.0.0
gotchaThe Quill editor requires a CSS stylesheet to be imported for proper styling. Without it, the editor will appear unstyled and potentially unusable.
fix
Add `import 'quill/dist/quill.snow.css'` (or other Quill theme CSS) to your component or global styles.
affects: >=1.0.0
gotcha`vue-quilly` requires explicit initialization of the Quill instance via `editor.value?.initialize(Quill)`. Forgetting this step will result in a non-functional editor.
fix
Ensure that `editor.value?.initialize(Quill)` is called, typically within the `onMounted` lifecycle hook, after the component has rendered.
affects: >=1.0.0
Errors
Common errors & fixes
TypeError: editor.value.initialize is not a function
The `initialize` method is called before the component reference (`editor.value`) is available or before the editor instance is ready.
fix
Ensure `editor.value` is defined and the component is mounted before calling `initialize`. This is typically done within Vue's `onMounted` hook.
[Vue warn]: Failed to resolve component: QuillyEditor
The `QuillyEditor` component was not correctly imported or registered in your Vue application.
fix
Verify that `import { QuillyEditor } from 'vue-quilly'` is present in your script and that `<QuillyEditor>` is used correctly in the template.
Editor displays without styling / Toolbar looks broken
Quill's default CSS stylesheet has not been imported, leaving the editor unstyled.
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.
Error: Quill is not installed. Please install 'quill@2'
The `quill` package, which is a required peer dependency, is not installed or the installed version is not compatible (must be v2).
fix
Execute `npm install quill@2`, `yarn add quill@2`, or `pnpm add quill@2` in your project's root directory.
Upgrade
Version history
1.1.6latest on npm
Audit
Dependencies
quillrequiredCore WYSIWYG editor library that vue-quilly wraps; explicitly required as a peer dependency.
Agent activity
9 hits · last 30 days
node
8
OpenAI (training)
1
Resources
githubhttps://github.com/alekswebnet/vue-quilly ↗
packagehttps://www.npmjs.com/package/vue-quilly ↗
homepagehttps://vue-quilly.vercel.app ↗
vue-quilly — npm install vue-quilly · libregistry