VueQuill + Nuxt
Comprehensive Vue Quill examples
A Nuxt app showing editor setup, content binding, toolbar strategies, themes, read-only states, events, refs, form usage, and Nuxt rendering modes.
Basic editor
A minimal Snow editor with placeholder text and initialized Delta content.
<QuillEditor theme="snow" toolbar="minimal" />
v-model and content types
Two-way HTML content binding with a live preview and editor ref methods.
Use the buttons to call focus(), setHTML(), or getHTML().
Live HTML preview
Launch checklist
Draft release notes, confirm screenshots, and send the publishing brief.
Toolbar customization
Switch between a built-in preset, an inline toolbar array, a custom slot toolbar, and no toolbar.
Uses the built-in minimal toolbar preset.
Modules
Register a custom Quill module through the modules prop and pass per-instance options.
Module output
- Words
- 0
- Characters
- 0
The module is registered as modules/wordCounter and receives an onUpdate option.
Themes
Compare Snow, Bubble, and the unthemed core editor while importing the matching CSS.
Read-only and enable states
Show a locked knowledge-base article and a live enable toggle for user input.
Read-only article
Events
Capture ready, focus, blur, text-change, selection-change, and editor-change payloads.
Latest events
Interact with the editor to see emitted events.
Form integration
Bind editor HTML into a form-like workflow with validation and submission state.