{"id":12433,"library":"vue-codemirror","title":"Vue CodeMirror 6 Component","description":"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.","status":"active","version":"6.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/surmon-china/vue-codemirror","tags":["javascript","vue-codemirror","vue codemirror","vue code editor","web IDE vue","typescript"],"install":[{"cmd":"npm install vue-codemirror","lang":"bash","label":"npm"},{"cmd":"yarn add vue-codemirror","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-codemirror","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for the Vue component.","package":"vue","optional":false},{"reason":"Core CodeMirror 6 library, a peer dependency for the component.","package":"codemirror","optional":false},{"reason":"Example language support; other `@codemirror/lang-*` packages may be needed based on language requirements.","package":"@codemirror/lang-javascript","optional":true},{"reason":"Example theme; other `@codemirror/theme-*` packages may be needed based on styling requirements.","package":"@codemirror/theme-one-dark","optional":true},{"reason":"Required if importing core CodeMirror API interfaces like `EditorState` directly.","package":"@codemirror/state","optional":true}],"imports":[{"note":"The library is ESM-only since v5/v6, so CommonJS 'require' is not supported.","wrong":"const Codemirror = require('vue-codemirror')","symbol":"Codemirror","correct":"import { Codemirror } from 'vue-codemirror'"},{"note":"Language extensions are imported directly from their respective `@codemirror/lang-*` packages, not from 'vue-codemirror'.","wrong":"import { langJavascript } from 'vue-codemirror'","symbol":"javascript","correct":"import { javascript } from '@codemirror/lang-javascript'"},{"note":"Core CodeMirror APIs and interfaces are imported from specific `@codemirror/*` packages, which must also be explicitly added to your project's `dependencies`.","wrong":"import { EditorState } from 'codemirror'","symbol":"EditorState","correct":"import { EditorState } from '@codemirror/state'"}],"quickstart":{"code":"import { defineComponent, ref, shallowRef } from 'vue'\nimport { Codemirror } from 'vue-codemirror'\nimport { javascript } from '@codemirror/lang-javascript'\nimport { oneDark } from '@codemirror/theme-one-dark'\n\nexport default defineComponent({\n  components: {\n    Codemirror\n  },\n  setup() {\n    const code = ref(`console.log('Hello, vue-codemirror!');\\nfunction sum(a, b) { return a + b; }`);\n    const extensions = [javascript(), oneDark];\n\n    const view = shallowRef();\n    const handleReady = (payload) => {\n      view.value = payload.view;\n      console.log('CodeMirror is ready:', payload);\n    };\n\n    const log = (event, value) => {\n      console.log(`${event} event:`, value);\n    };\n\n    return {\n      code,\n      extensions,\n      handleReady,\n      log\n    };\n  },\n  template: `\n    <div style=\"height: 400px; border: 1px solid #ccc;\">\n      <codemirror\n        v-model=\"code\"\n        placeholder=\"Code goes here...\"\n        :style=\"{ height: '100%' }\"\n        :autofocus=\"true\"\n        :indent-with-tab=\"true\"\n        :tab-size=\"2\"\n        :extensions=\"extensions\"\n        @ready=\"handleReady\"\n        @change=\"log('change', $event)\"\n        @focus=\"log('focus', $event)\"\n        @blur=\"log('blur', $event)\"\n      />\n    </div>\n  `\n})","lang":"typescript","description":"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'."},"warnings":[{"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.","message":"Versions 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.","severity":"breaking","affected_versions":">=5.0.0"},{"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.","message":"CodeMirror 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.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"Install required CodeMirror packages using `npm install @codemirror/lang-html @codemirror/theme-one-dark` and import them in your Vue component as extensions.","message":"Language 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.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"Add the specific `@codemirror/*` package to your `package.json`'s `dependencies` section, for instance: `\"@codemirror/state\": \"6.x\"`.","message":"If 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.","severity":"gotcha","affected_versions":">=5.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you have `import { Codemirror } from 'vue-codemirror'` and registered it in your component's `components` option: `components: { Codemirror }`.","cause":"The Codemirror component was not properly imported or registered in your Vue component.","error":"Failed to resolve component: codemirror"},{"fix":"Run `npm install codemirror` or `yarn add codemirror` to install the core CodeMirror library.","cause":"The `codemirror` peer dependency is missing from your project's `node_modules`.","error":"Module not found: Error: Can't resolve 'codemirror' in 'your-project-path/node_modules/vue-codemirror/dist'"},{"fix":"Update your import statements to use ES Module `import` syntax: `import { Codemirror } from 'vue-codemirror'`.","cause":"Attempting to use CommonJS `require()` syntax to import `vue-codemirror` or its dependencies, but the library is ESM-only since v5/v6.","error":"Uncaught SyntaxError: require is not defined in ES module scope"},{"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()]`.","cause":"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.","error":"TypeError: Cannot read properties of undefined (reading 'of')"}],"ecosystem":"npm"}