vue-codemirror6


A component for using CodeMirror6 with Vue. This component works in both Vue2 and Vue3.

- CHANGELOG

Usage

``sh
yarn add vue-codemirror6 codemirror
`

For Vue 2.7 or below, @vue/composition-api is required separately.

`sh
yarn add vue-codemirror6 @vue/composition-api
`

This component can handle bidirectional binding by v-model like a general Vue component.

Props

| Props | Type | Information |
| ------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| model-value | string \| Text | Text value. (Not value) |
| basic | boolean | Use basicSetup. |
| minimal | boolean | Use miniSetup. If a basic prop is also specified, that setting will take precedence. |
| dark | boolean | Toggle Darkmode. |
| placeholder | string | Add placeholder text (or HTML DOM) when blank |
| wrap | boolean | Line text wrapping. see lineWrapping. |
| tab | boolean | Enables tab indentation. |
| allow-multiple-selections | boolean | Allow Multiple Selection. See allowMultipleSelections |
| tab-size | number | Configures the tab size to use in this state. |
| line-separator | string | Set line break (separetor) char. (Default is \n.) |
| theme | { [selector: string]: StyleSpec } | Specify the theme. For example, if you use @codemirror/theme-one-dark, import oneDark and put it in this prop. |
| readonly | boolean | Makes the cursor visible or you can drag the text but not edit the value. |
| disabled | boolean | This is the reversed value of the CodeMirror editable. Similar to readonly, but setting this value to true disables dragging. |
| lang | LanguageSupport | The language you want to have syntax highlighting. see |
| phrases | Record<string, string> | Specify here if you want to make the displayed character string multilingual. see |
| extensions | Extension[] | Includes enhancements to extend CodeMirror. |
| linter | LintSource | Set Linter. Enter a linter (eg esLint([arbitrary rule]) function for @codemirror/lang-javascript, jsonParseLinter()function for@codemirror/json). See the sources for various language libraries for more information. |
| linterConfig | Object | see |
| forceLinting | boolean | see |
| gutter | boolean | Display 🔴 on the line where there was an error when linter was specified. It will not work if linter is not specified. |
| gutterConfig | Object | see |
| tag | string | HTML tags used in the component. (Default is div tag.) |
| scrollIntoView | boolean | Allows an external update to scroll the form. (Default is true) |
| keymap | KeyBinding[] | Key bindings associate key names with command-style functions. See |

⚠ Notice: lang and linter can also be set together in extensions. These are separated for compatibility with previous versions of CodeMirror settings and for typing props.

$3

#### Official

- @codemirror/lang-angular
- @codemirror/lang-cpp
- @codemirror/lang-css
- @codemirror/lang-html
- @codemirror/lang-java
- @codemirror/lang-javascript
- @codemirror/lang-json
- @codemirror/lang-lezer
- @codemirror/lang-markdown
- @codemirror/lang-php
- @codemirror/lang-python
- @codemirror/lang-rust
- @codemirror/lang-sql
- @codemirror/lang-vue
- @codemirror/lang-west
- @codemirror/lang-xml

$3

- @phoenix-plugin-registry/petetnt.brackets-codemirror-fortran
- @phoenix-plugin-registry/petetnt.brackets-codemirror-go
- @acarl005/lang-sql
- @ark-us/codemirror-lang-taylor
- @formulavize/lang-fiz
- @gravitywiz/codemirror-lang-gfcalc
- @nextjournal/lang-clojure
- @plutojl/lang-julia
- @polybase/codemirror-lang-javascript -@replit/codemirror-lang-nix
- @replit/codemirror-lang-csharp
- @replit/codemirror-lang-solidity
- @replit/codemirror-lang-svelte
- @zhijiu/lang-sql
- codemirror-lang-bool
- codemirror-lang-brainfuck
- codemirror-lang-cherry
- codemirror-lang-chordpro
- codemirror-lang-circom
- codemirror-lang-edn
- codemirror-lang-ejs
- codemirror-lang-fsl
- codemirror-lang-gml
- codemirror-lang-golfscript
- codemirror-lang-homescript
- codemirror-lang-html-n8n
- codemirror-lang-inform7
- codemirror-lang-j
- codemirror-lang-janet
- codemirror-lang-k
- codemirror-lang-karol
- codemirror-lang-mermaid
- codemirror-lang-n8n-expression
- codemirror-lang-prolog
- codemirror-lang-qpen
- codemirror-lang-qtam
- codemirror-lang-r
- codemirror-lang-rome-ast
- codemirror-lang-rome
- codemirror-lang-rush
- codemirror-lang-scopescript
- codemirror-lang-statement
- gcode-lang-codemirror
- gmail-lang
- lang-bqn
- lang-clojure
- lang-d
- lang-feel
- lang-firestore

$3

- @codemirror/theme-one-dark
- upleveled/theme-vs-code-dark-plus
- codemirror6-bootstrap-theme

Example

Mark up as follows to make it work at a minimum.

`vue



`

$3

The contents of the slot will overwrite the existing v-model. For this reason, it is recommended to use it when simply displaying with a readonly prop without using v-model.

Also, insert a

 tag to prevent the text in the slot from being automatically formatted.
`vue

`
$3
This component is now SSR-compatible. CodeMirror will only be initialized on the client side, and the component will safely render without errors during server-side rendering.
If you're using Nuxt 3, you can use the component directly:
`vue

`
For Nuxt 2 or if you encounter any issues, you can wrap the component with :
`vue

`
$3
When using as a Markdown editor on vite-vue3-ts-starter.
`vue

`
Events
| Event  | Description                                                                                                   |
| ------ | ------------------------------------------------------------------------------------------------------------- |
| ready  | When CodeMirror loaded.                                                                                       |
| focus  | When focus changed.                                                                                           |
| update | When CodeMirror state changed. Returns ViewUpdate object. |
| change | Value changed. Returns EditorState                      |
Parameter / Function
`vue


`
| Function / Parameter | Description                                                                                         |
| -------------------- | --------------------------------------------------------------------------------------------------- |
| view                 | Get and set EditorView.                         |
| selection            | Get and set the EditorSelection instance. |
| cursor               | Get and set the cursor location.   |
| json                 | Get and set state to a JSON-serializable object.                                                    |
| focus                | Get and set focus.                        |
| lint()               | Force run linter (Only if linter prop is specified)                                               |
| forceReconfigure()   | Re register all extensions.                                                                         |
$3
The instructions below are compatible methods for those familiar with codemirror5.
Since the above method is usually sufficient, its active use is not recommended.
| Function                                                            | Description                                                                                      |
| ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| getRange(from?: number, to?: number)                                | Get the text between the given points in the editor.                                             |
| getLine(number: number)                                             | Get the content of line.                                                                         |
| lineCount()                                                         | Get the number of lines in the editor.                                                           |
| getCursor()                                                         | Retrieve one end of the primary selection.                                                       |
| listSelections()                                                    | Retrieves a list of all current selections.                                                      |
| getSelection()                                                      | Get the currently selected code.                                                                 |
| getSelections()                                                     | The length of the given array should be the same as the number of active selections.             |
| somethingSelected()                                                 | Return true if any text is selected.                                                             |
| replaceRange(replacement: string \| Text, from: number, to: number) | Replace the part of the document between from and to with the given string.                      |
| replaceSelection(replacement: string \| Text)                       | Replace the selection(s) with the given string.                                                  |
| setCursor(position: number)                                         | Set the cursor position.                                                                         |
| setSelection(anchor: number, head?: number)                         | Set a single selection range.                                                                    |
| setSelections(ranges: readonly SelectionRange[], primary?: number)  | Sets a new set of selections.                                                                    |
| extendSelectionsBy(f: Function)                                     | Applies the given function to all existing selections, and calls extendSelections on the result. |
Recommendations
Since CodeMirror has a relatively large capacity, when using vite, it is recommended to set it to output as a separate file using the manualChunks option at build time as shown below.
`ts
const config: UserConfig = {
  // ...
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // ...
          codemirror: ['vue-codemirror6'],
          'codemirror-lang': [
            // Add the following as needed.
            '@codemirror/lang-html',
            '@codemirror/lang-javascript',
            '@codemirror/lang-markdown',
          ],
          // ...
        },
      },
    },
  },
  // ...
};
`
Development
$3
This project uses Vitest for unit testing.
`bash
Run tests

pnpm test
Run tests in watch mode

pnpm test:watch
Run tests with UI

pnpm test:ui
Run tests with coverage

pnpm test:coverage
``
The test suite includes:
- Component Tests: Testing basic rendering, props, events, and v-model binding
- SSR Tests: Ensuring proper server-side rendering compatibility for Nuxt.js and other SSR frameworks
- Method Tests: Verifying all exposed methods work correctly
- Edge Cases: Testing error handling and unusual scenarios
LICENSE
©2022-2025 by Logue.
Licensed under the MIT License.