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

CodeMirror packages

Usage

Install

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`

e.g.

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

import { EditorState } from '@codemirror/state'

local component

<template>
  <codemirror
    v-model="code"
    placeholder="Code goes here..."
    :style="{ height: '400px' }"
    :autofocus="true"
    :indent-with-tab="true"
    :tab-size="2"
    :extensions="extensions"
    @ready="log('ready', $event)"
    @change="log('change', $event)"
    @focus="log('focus', $event)"
    @blur="log('blur', $event)"
  />
</template>

<script>
  import { Codemirror } from 'vue-codemirror'
  import { javascript } from '@codemirror/lang-javascript'
  import { oneDark } from '@codemirror/theme-one-dark'

  export default {
    components: {
      Codemirror
    },
    setup() {
      const code = ref(`console.log('Hello, world!')`)
      const extensions = [javascript(), oneDark]

      return {
        code,
        extensions,
        log: console.log
      }
    }
  }
</script>

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`	`{}`
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 edirot 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: []
})

Changelog

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

License

Licensed under the MIT License.

mukeran/vue-codemirror