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-htmlyarn add @codemirror/lang-jsonyarn 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 yourpackage.json

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

import{EditorState}from'@codemirror/state'

Local component

<template>  <codemirrorv-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,ref,shallowRef }from'vue'import {Codemirror }from'vue-codemirror'import {javascript }from'@codemirror/lang-javascript'import {oneDark }from'@codemirror/theme-one-dark'exportdefaultdefineComponent({    components: {      Codemirror    },setup() {constcode=ref(`console.log('Hello, world!')`)constextensions= [javascript(), oneDark]// Codemirror EditorView instance refconstview=shallowRef()consthandleReady= (payload)=> {view.value=payload.view      }// Status is available at all times via Codemirror EditorViewconstgetCodemirrorStates= ()=> {conststate=view.value.stateconstranges=state.selection.rangesconstselected=ranges.reduce((r,range)=> r+range.to-range.from,0)constcursor= ranges[0].anchorconstlength=state.doc.lengthconstlines=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'importVueCodemirrorfrom'vue-codemirror'constapp=createApp()app.use(VueCodemirror,{// optional default global optionsautofocus:true,disabled:false,indentWithTab:true,tabSize:2,placeholder:'Code goes here...',extensions:[basicSetup]// ...})

Component Props

Component Events

Basic Setup

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

Changelog

License