vue-codemirror6

vue-codemirror6 wraps the CodeMirror 6 editor as a single Vue component that works transparently in both Vue 2 and Vue 3. It exposes CodeMirror’s editor state through familiar Vue idioms — two-way v-model binding, reactive props for theme, language, linting, wrapping, and read-only modes — so you can drop a fully featured code editor into a form without wiring the CodeMirror imperative API yourself.

Built on top of vue-demi for cross-version compatibility, it keeps CodeMirror’s modular extension system available: you pass in official or community language packs, custom themes, keymaps, and linters as props, while the component manages the editor lifecycle, SSR safety, and scroll-position preservation.

What You Get

• A single <Codemirror> component that renders CodeMirror 6 and supports both Vue 2 (with @vue/composition-api) and Vue 3
• Two-way v-model binding for editor content plus reactive props for theme, language, linting, wrapping, and read-only state
• Pass-through access to CodeMirror’s extension system — language packs, custom themes, keymaps, and lint sources
• SSR-safe rendering and optional scroll-position preservation on external updates

Common Use Cases

• Embedding a code or config editor inside a Vue admin panel or form
• Building an in-browser playground or snippet editor with live syntax highlighting
• Adding a Markdown or SQL editing surface with language-aware highlighting and linting

Under The Hood

Architecture — The library centers on a single component defined in src/index.ts that constructs a CodeMirror EditorView over a reactive EditorState, translating Vue props (theme, lang, linter, wrap, readonly) into CodeMirror Extensions and reconciling the v-model value against editor transactions. Cross-version rendering is handled through src/helpers/h-demi.ts, which normalizes Vue 2 and Vue 3 render semantics.

Tech Stack — Written in TypeScript, it depends only on vue-demi at runtime and declares CodeMirror packages (@codemirror/state, @codemirror/view, @codemirror/language, @codemirror/lint, and others) plus vue as peer dependencies. The build uses the rslib/rsbuild toolchain with Biome for linting and rstest for testing.

Code Quality — The src/__tests__ directory holds component and SSR specs (CodeMirror.spec.ts, CodeMirror.ssr.spec.ts), so both interactive and server-render paths are exercised. Types are defined under src/interfaces, and the codebase is small and focused, keeping the surface easy to audit.

API Design — The public API is a single component with well-named, well-documented props mapped one-to-one onto CodeMirror concepts, so a Vue developer familiar with v-model can get an editor running in a few lines. Escaping to raw CodeMirror power is available through the extensions prop without leaving the declarative model.