1. vue-codemirror
CodeMirror code editor component for Vue
vue-codemirror
Package: vue-codemirror
Created by: surmon-china
Last modified: Sat, 27 Aug 2022 19:38:24 GMT
Version: 6.1.1
License: MIT
Downloads: 229,464
Repository: https://github.com/surmon-china/vue-codemirror

Install

npm install vue-codemirror
yarn add vue-codemirror

vue-codemirror

vue
 
GitHub stars
 
npm
 
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


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="handleReady"
    @change="log('change', $event)"
    @focus="log('focus', $event)"
    @blur="log('blur', $event)"
  />
</template>

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

  export default defineComponent({
    components: {
      Codemirror
    },
    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.to - range.from, 0)
        const cursor = ranges[0].anchor
        const length = state.doc.length
        const lines = state.doc.lines
        // more state info ...
        // return ...
      }

      return {
        code,
        extensions,
        handleReady,
        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 {}
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 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.

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code