CodeMirror6 Component for vue2 and vue3.
npm install vue-codemirror6







A component for using CodeMirror6 with Vue. This component works in both Vue2 and Vue3.
``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 | Type | Information |
| ------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| model-value | string \| Text | Text value. (Not value) |basic
| basic | boolean | Use basicSetup. |
| minimal | boolean | Use miniSetup. If a prop is also specified, that setting will take precedence. |\n
| 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 .) |oneDark
| theme | { [selector: string]: StyleSpec } | Specify the theme. For example, if you use @codemirror/theme-one-dark, import and put it in this prop. |readonly
| 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 , but setting this value to true disables dragging. |esLint([arbitrary rule])
| 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 function for @codemirror/lang-javascript, jsonParseLinter()function for@codemirror/json). See the sources for various language libraries for more information. |linter
| linterConfig | Object | see
| forceLinting | boolean | see
| gutter | boolean | Display š“ on the line where there was an error when was specified. It will not work if linter is not specified. |div
| gutterConfig | Object | see
| tag | string | HTML tags used in the component. (Default is tag.) |true
| scrollIntoView | boolean | Allows an external update to scroll the form. (Default is ) |
| 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.
#### 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
- @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
- @codemirror/theme-one-dark
- upleveled/theme-vs-code-dark-plus
- codemirror6-bootstrap-theme
Mark up as follows to make it work at a minimum.
`vue
`
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`
>
{
"key": "value"
}
`$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`
v-model="value"
basic
:dark="dark"
:lang="lang"
:phrases="phrases"
/>`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`
linter| 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 ifprop is specified) |manualChunks
| 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
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 testRun tests in watch mode
pnpm test:watchRun tests with UI
pnpm test:uiRun tests with coverage
pnpm test:coverageThe 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 scenariosLICENSE
©2022-2025 by Logue.
Licensed under the MIT License.