Vue CodeMirror 6 Component

Common errors

• Failed to resolve component: codemirror

  cause 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'

  cause 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

  cause 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')

  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.
  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()]`.

Warnings

• breaking 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.
  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.
• gotcha 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.
  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.
• gotcha 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.
  Fix: Install required CodeMirror packages using `npm install @codemirror/lang-html @codemirror/theme-one-dark` and import them in your Vue component as extensions.
• gotcha 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.
  Fix: Add the specific `@codemirror/*` package to your `package.json`'s `dependencies` section, for instance: `"@codemirror/state": "6.x"`.

Install

• npm install vue-codemirror npm
• yarn add vue-codemirror yarn
• pnpm add vue-codemirror pnpm

Imports

• Codemirror
  wrong:

  const Codemirror = require('vue-codemirror')

  correct:

  import { Codemirror } from 'vue-codemirror'

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

  import { langJavascript } from 'vue-codemirror'

  correct:

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

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

  import { EditorState } from 'codemirror'

  correct:

  import { EditorState } from '@codemirror/state'

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

Quickstart

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>
  `
})