Vue Codemirror

@codemirror code editor component for @vuejs
Alternatives To Vue Codemirror
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Vue Codemirror2,62033160610 months ago51August 27, 202258mitTypeScript
@codemirror code editor component for @vuejs
Vjdesign40719 months ago51December 05, 202214mitVue
Vue 界面可视化设计器,支持任何 html 标签以及项目中引用的组件,可实现仅通过配置文件就能增加支持的组件和组件属性
Plantuml Editor387
2 years ago19mitVue
PlantUML online demo client
10 months ago24otherVue
A multiple pages app built for OnlineJudge
Vue Codemirror Lite215491806 years ago5February 17, 2018mitVue
Lightweight Codemirror Component for Vue.js
Ink Mde1468a month ago49September 27, 202310mitTypeScript
A beautiful, modern, customizable Markdown editor powered by CodeMirror 6 and TypeScript
Codemirror Editor Vue313830a month ago95November 07, 20231mitTypeScript
CodeMirror component for Vue3
Js Encoder136
a year ago11mitJavaScript
JS-Encoder is an online front-end code editor(前端在线代码编辑器)built with vue and codemirror. If you want to support JS-Encoder, click star 💗 to support it!
V Markdown Editor99832 years ago26July 11, 202021mitVue
Vue.js Markdown Editor component
Vue Cm45316 years ago3August 03, 20171mitJavaScript
CodeMirror component for Vue.js
Alternatives To Vue Codemirror
Select To Compare

Alternative Project Comparisons


vue   npm   GitHub stars   Test Codecov   license

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


CodeMirror packages



yarn add codemirror vue-codemirror
npm install codemirror vue-codemirror --save

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

# 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


"dependencies": {
  "@codemirror/state": "6.x"
import { EditorState } from '@codemirror/state'

Local component

    placeholder="Code goes here..."
    :style="{ height: '400px' }"
    @change="log('change', $event)"
    @focus="log('focus', $event)"
    @blur="log('blur', $event)"

  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: {
    setup() {
      const code = ref(`console.log('Hello, world!')`)
      const extensions = [javascript(), oneDark]

      // Codemirror EditorView instance ref
      const view = shallowRef()
      const handleReady = (payload) => {
        view.value = payload.view

      // Status is available at all times via Codemirror EditorView
      const getCodemirrorStates = () => {
        const state = view.value.state
        const ranges = state.selection.ranges
        const selected = ranges.reduce((r, range) => r + - range.from, 0)
        const cursor = ranges[0].anchor
        const length = state.doc.length
        const lines = state.doc.lines
        // more state info ...
        // return ...

      return {
        log: console.log

Global component

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]
  // ...

Component Props

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 -

Component Events

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 editor component mounted. (payload: { view: EditorView; state: EditorState; container: HTMLDivElement })

Basic Setup

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.

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


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


Licensed under the MIT License.

Popular Codemirror Projects
Popular Vue Projects
Popular Text Editors Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Vue Component
Code Editor
Vue Plugin
Web Editor