Registry / web-framework / vue-codemirror

vue-codemirror

library6.1.1jsnpmunverified

vue-codemirror is a Vue 3 component that provides a robust wrapper for CodeMirror 6, the modern code editor library. The current stable version is 6.1.1. This library is actively maintained, with frequent minor releases and bug fixes, indicated by its release history. A key differentiator is its strict adherence to Vue 3 and CodeMirror 6, making it completely incompatible with previous versions of CodeMirror (v5 and below) or Vue (v2). It leverages CodeMirror 6's native ES Module structure, meaning it no longer supports UMD modules for direct browser references, requiring a module bundler. Users must explicitly install additional CodeMirror language, theme, and state packages as needed, as they are not bundled.

web-framework

npm install vue-codemirror

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-CODEMIRROR

vue-codemirror

web-frameworkjavascriptv6.1.1

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.

Codemirror

✓ import { Codemirror } from 'vue-codemirror'

✗ const Codemirror = require('vue-codemirror')

The library is ESM-only since v5/v6, so CommonJS 'require' is not supported.

javascript

✓ import { javascript } from '@codemirror/lang-javascript'

✗ import { langJavascript } from 'vue-codemirror'

Language extensions are imported directly from their respective `@codemirror/lang-*` packages, not from 'vue-codemirror'.

EditorState

✓ import { EditorState } from '@codemirror/state'

✗ import { EditorState } from 'codemirror'

Core CodeMirror APIs and interfaces are imported from specific `@codemirror/*` packages, which must also be explicitly added to your project's `dependencies`.

This quickstart demonstrates the basic setup of the CodeMirror 6 editor component in a Vue 3 application, including v-model binding, applying language extensions and themes, and handling editor events like 'ready', 'change', 'focus', and 'blur'.

import { defineComponent, ref, shallowRef } from 'vue' import { Codemirror } from 'vue-codemirror' import { javascript } from '@codemirror/lang-javascript' import { oneDark } from '@codemirror/theme-one-dark' export default defineComponent({ components: { Codemirror }, setup() { const code = ref(`console.log('Hello, vue-codemirror!');\nfunction sum(a, b) { return a + b; }`); const extensions = [javascript(), oneDark]; const view = shallowRef(); const handleReady = (payload) => { view.value = payload.view; console.log('CodeMirror is ready:', payload); }; const log = (event, value) => { console.log(`${event} event:`, value); }; return { code, extensions, handleReady, log }; }, template: ` <div style="height: 400px; border: 1px solid #ccc;"> <codemirror v-model="code" placeholder="Code goes here..." :style="{ height: '100%' }" :autofocus="true" :indent-with-tab="true" :tab-size="2" :extensions="extensions" @ready="handleReady" @change="log('change', $event)" @focus="log('focus', $event)" @blur="log('blur', $event)" /> </div> ` })

Debug

Known issues

breakingVersions 5 and 6 of vue-codemirror are completely incompatible with previous versions (v4 and below). This is due to a fundamental rewrite based on CodeMirror 6 and Vue 3. Migration from v4 will require significant code changes.

fix

For new projects, use vue-codemirror@6.x. For existing Vue 2 / CodeMirror 5 projects, you must remain on vue-codemirror@4.x or undertake a full migration to Vue 3 and CodeMirror 6.

affects: >=5.0.0

gotchaCodeMirror 6, and consequently vue-codemirror v5/v6, are developed with native ES Modules and do not support direct browser references to UMD modules. A module bundler like Webpack or Vite is required.

fix

Ensure your project is set up with a modern JavaScript module bundler that supports ES Modules. Avoid attempting to include the library via a <script> tag directly in HTML.

affects: >=5.0.0

gotchaLanguage support, themes, and other CodeMirror features are not bundled with vue-codemirror. You must explicitly install separate `@codemirror/*` packages (e.g., `@codemirror/lang-javascript`, `@codemirror/theme-one-dark`) based on your application's needs.

fix

Install required CodeMirror packages using `npm install @codemirror/lang-html @codemirror/theme-one-dark` and import them in your Vue component as extensions.

affects: >=5.0.0

gotchaIf you need to import specific CodeMirror API interfaces or types (e.g., `EditorState`, `EditorView`) from `@codemirror/*` packages, those specific packages must be explicitly listed in your project's `dependencies` in `package.json`, even if they are transitively pulled in.

fix

Add the specific `@codemirror/*` package to your `package.json`'s `dependencies` section, for instance: `"@codemirror/state": "6.x"`.

affects: >=5.0.0

Errors

Common errors & fixes

Failed to resolve component: codemirror

The Codemirror component was not properly imported or registered in your Vue component.

fix

Ensure you have `import { Codemirror } from 'vue-codemirror'` and registered it in your component's `components` option: `components: { Codemirror }`.

Module not found: Error: Can't resolve 'codemirror' in 'your-project-path/node_modules/vue-codemirror/dist'

The `codemirror` peer dependency is missing from your project's `node_modules`.

fix

Run `npm install codemirror` or `yarn add codemirror` to install the core CodeMirror library.

Uncaught SyntaxError: require is not defined in ES module scope

Attempting to use CommonJS `require()` syntax to import `vue-codemirror` or its dependencies, but the library is ESM-only since v5/v6.

fix

Update your import statements to use ES Module `import` syntax: `import { Codemirror } from 'vue-codemirror'`.

TypeError: Cannot read properties of undefined (reading 'of')

Likely an issue with CodeMirror extensions. You might be passing an undefined or invalid extension to the `extensions` prop, or a required CodeMirror package for an extension is missing.

fix

Verify that all CodeMirror language, theme, and utility packages (e.g., `@codemirror/lang-javascript`) are installed, correctly imported, and properly added to the `extensions` array, e.g., `[javascript()]`.

Upgrade

Version history

6.1.1latest on npm

Audit

Dependencies

vuerequiredRequired peer dependency for the Vue component.

codemirrorrequiredCore CodeMirror 6 library, a peer dependency for the component.

@codemirror/lang-javascriptoptionalExample language support; other `@codemirror/lang-*` packages may be needed based on language requirements.

@codemirror/theme-one-darkoptionalExample theme; other `@codemirror/theme-*` packages may be needed based on styling requirements.

@codemirror/stateoptionalRequired if importing core CodeMirror API interfaces like `EditorState` directly.

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/surmon-china/vue-codemirror ↗

packagehttps://www.npmjs.com/package/vue-codemirror ↗

homepagehttps://github.surmon.me/vue-codemirror ↗