vue-codemirror

vue-codemirror wraps CodeMirror 6 as a native Vue 3 component, exposing the editor’s state and extensions through familiar Vue props, events, and v-model binding. Rather than reimplementing editor behavior, it’s a thin integration layer: you install CodeMirror language and theme packages directly from the CodeMirror 6 ecosystem and pass them in as extensions, keeping the component’s own surface area small.

The component supports both local (<Codemirror>) and global (app.use(VueCodemirror, options)) registration, ships CodeMirror’s basic-setup extension bundle by default for a batteries-included starting point, and emits ready/change/focus/blur/update events that expose the underlying EditorView instance for advanced state inspection. This version targets Vue 3 and CodeMirror 6 only — Vue 2 or CodeMirror 5 users need the separate vue-codemirror@4.x legacy branch.

What You Get

• A <Codemirror> component with v-model two-way binding for editor content
• Local component usage or global app.use(VueCodemirror, options) registration with shared defaults
• Direct pass-through of CodeMirror 6 extensions (languages, themes, linting) with no wrapper API to learn
• ready/change/focus/blur/update events exposing the live EditorView and EditorState
• CodeMirror’s basic-setup bundle enabled by default for a working editor out of the box
• Configurable props for autofocus, tab size, indent-with-tab, placeholder, and disabled state

Common Use Cases

• Embedding a code editor into a Vue 3 admin panel, playground, or CMS content field
• Building a web IDE or in-browser code-execution tool with syntax highlighting per language
• Adding a JSON/YAML/config editor with live validation to a Vue application
• Rendering a themeable code snippet editor with two-way binding to component state

Under The Hood

Architecture - The component (src/component.ts) is a Vue 3 defineComponent that owns a shallow-ref EditorState/EditorView pair; on mount it calls createEditorState/createEditorView (in codemirror.ts) to instantiate CodeMirror against a container div, merges component props with global defaults resolved via useGlobalConfig() (config.ts), and reconfigures the CodeMirror extension set reactively as props change, emitting Vue events (focus/blur/update/change) from CodeMirror’s own callback hooks. Tech Stack - Written in TypeScript against Vue 3’s Composition API (shallowRef, computed, watch, onMounted/onBeforeUnmount) and CodeMirror 6’s @codemirror/state/@codemirror/view packages, built with a custom libundler.config.ts and Vite for the dev/demo app, with codemirror’s basic-setup bundle as an optional default extension. Code Quality - A dedicated test/index.test.ts suite plus Codecov integration referenced in the README cover component mounting and event behavior; the source is split into small single-responsibility files (component.ts, codemirror.ts, config.ts, events.ts, props.ts) which keeps each concern easy to audit despite the project having no commits since 2024. API Design - The component intentionally exposes CodeMirror’s native extensions array directly rather than wrapping it, so anyone who already knows CodeMirror 6’s API can configure languages/themes without learning a vue-codemirror-specific abstraction, at the cost of requiring consumers to install CodeMirror packages themselves as documented in the README.