vue-codemirror

 
 
 
 

CodeMirror(6) component for Vue(3).

vue-codemirror v5/v6 has been released. This is a new version based on CodeMirror@6 and is available to Vue3 only. Since CodeMirror@6 is developed with native ES Modules, the new version will no longer support direct browser references to UMD modules. In short, the new version is ⚠️ completely NOT compatible with previous versions. If you wish to continue using Vue2 or a lower version of CodeMirror, please refer to the legacy versions below.

This example site contains most of what you want.

#### Legacy version

- examples (Vue2)
- vue-codemirror@4.x (Vue2 / CodeMirror5)

---

#### Documentation

- CodeMirror6 Guide
- CodeMirror6 APIs
- CodeMirror6 Examples
- CodeMirror6 Example: Writing a Language Package
- CodeMirror6 Example: Styling
- CodeMirror Forum

#### CodeMirror packages

- CodeMirror6 Languages
- CodeMirror6 Themes

---

$3

#### Install

``bash
yarn add codemirror vue-codemirror
`

`bash
npm install codemirror vue-codemirror --save
`

#### Depending on your actual needs, you may need to install more CodeMirror packages

`bash


CodeMirror languages...

yarn add @codemirror/lang-html
yarn add @codemirror/lang-json
yarn add @codemirror/lang-javascript

CodeMirror themes...

yarn add @codemirror/theme-one-dark

more CodeMirror packages...

`

#### If you need import API/interface from codemirror, you need to make codemirror explicitly dependent in your package.json

e.g.

`json
"dependencies": {
"@codemirror/state": "6.x"
}
`

`ts
import { EditorState } from '@codemirror/state'
`

#### Local component

`vue



`

#### Global component

`javascript
import { createApp } from 'vue'
import { basicSetup } from 'codemirror'
import VueCodemirror from 'vue-codemirror'

const app = createApp()

app.use(VueCodemirror, {
// optional default global options
autofocus: true,
disabled: false,
indentWithTab: true,
tabSize: 2,
placeholder: 'Code goes here...',
extensions: [basicSetup]
// ...
})
`

$3

| prop | description | type | default |
| :------------ | :------------------------------------------------------------------------------------- | :----------------------- | :------ |
| modelValue | The input values accepted by the component also support two-way binding. | String | '' |
| autofocus | Focus editor immediately after mounted. | Boolean | false |
| disabled | Disable input behavior and disable change state. | Boolean | false |
| indentWithTab | Bind keyboard Tab key event. | Boolean | true |
| tabSize | Specify the indent when the Tab key is pressed. | Number | 2 |
| placeholder | Display when empty. | String | '' |
| style | The CSS style object that acts on the CodeMirror itself. | Object | {} |
| phrases | Codemirror internationalization phrases. | Object | {} |
| autoDestroy | Auto destroy the CodeMirror instance before the component unmount. | Boolean | true |
| extensions | Passed to CodeMirror EditorState.create({ extensions }) | Extension | [] |
| selection | Passed to CodeMirror EditorState.create({ selection }) | EditorSelection | - |
| root | Passed to CodeMirror new EditorView({ root }) | ShadowRoot \| Document | - |

$3

| event | description | params |
| :------------------ | :------------------------------------------------------ | :------------------------------------------------------------------------------- |
| update:modelValue | Only when the CodeMirror content (doc) has changed. | (value: string, viewUpdate: ViewUpdate) |
| change | ditto | ditto |
| update | When any state of CodeMirror changes. | (viewUpdate: ViewUpdate) |
| focus | When CodeMirror focused. | (viewUpdate: ViewUpdate) |
| blur | When CodeMirror blurred. | (viewUpdate: ViewUpdate) |
| ready | When edirot component mounted. | (payload: { view: EditorView; state: EditorState; container: HTMLDivElement }) |

$3

The basic-setup extension is integrated by default in the vue-codemirror configuration and is intended as a handy helper to quickly set up CodeMirror without having to install and import a lot of standalone packages. If you want to override the default behavior of the config, just pass the empty array when installing the component globally.

`js
app.use(VueCodemirror, {
// keep the global default extensions empty
extensions: []
})
``

$3

Detailed changes for each release are documented in the release notes.

$3

Licensed under the MIT License.